css编写 div屏幕可视范围内永久居中

最新推荐文章于 2024-12-03 09:57:35 发布

原创最新推荐文章于 2024-12-03 09:57:35 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #center

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了两种使用CSS实现元素在页面上居中的方法。方法一利用了transform和translateY属性，而方法二则通过margin调整实现。两种方法都适用于固定宽度的元素，但方法一对transform属性的支持更为广泛。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

两种方法，第一种完美居中显示，第二种也算完美吧，主要是竟然有个别人的手机无法识别 transform属性；

方法一：

.show1{
    width: 15rem;
    padding: 0.8rem;
    box-sizing: border-box;
    position: fixed;
    left: 50%;
    margin-left: -7.5rem;/* 为自身宽度的负一半 */
    top: 50%;
    transform: translateY(-50%);
    background: #ffffff;
    z-index: 5000;
    border-radius: 5px;
}

方法二：

.show2 {
    width: 15rem;
    padding: 0.8rem;
    box-sizing: border-box;
    position: fixed;/* 可视界面居中重要设置 */
    left: 50%;
    margin-left: -7.5rem;/* 为自身宽度的负一半 */
    top: 50%;
    margin-top: -62%;/* 为自身高度的负一半；当自身高度不确定时，可以自己调节 */
    background: #ffffff;
    z-index: 5000;
    border-radius: 5px;
}