menu 鼠子Blog CSS3 水平垂直居中
search
鼠子
Tomori@miomoe.cn
CSS3 水平垂直居中
2024-09-30 · 字数：1756 · Web前端 · CSS

当使用top: 50%和left: 50% 是以左上角为原点，故不处于中心位置，可以用translate()实现水平垂直居中。

translate()是css3的新特性，在不知道自身宽高的情况下，可以利用它来进行水平垂直居中。

translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。

.box {
    position: fixed;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100px;
    max-width: 640px;
    min-width: 320px;
    border: 1px solid red;
    transform: translateX(-50%);
}

或者

.box {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    border-radius: 5px;
    border: 1px solid #ff0000;
    background: #ff0000;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

与负margin-left和margin-top实现居中不同的是，margin-left必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中，translate()函数中的百分比是相对于自身宽高的百分比，所以能进行居中。

实例：











    

        
居中文字
文章版权声明 本网站名称：鼠子Blog
本站永久网址：https://blog.miomoe.cn/
如有侵权，请联系站长进行删除处理。
本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！
comment 共有 0 条评论
account_circle
email
link