CSS3实现垂直水平居中

242 阅读1分钟

在程序开发过程中,元素居中是常常用到的。 居中又可以分为水平居中和垂直居中。 水平居中是比较容易的,块级元素设置margin: 0 auto;,行内元素在父元素设置text-align: center;. 但是垂直居中相对来说是比较复杂一些的。下面介绍一种我常用的垂直居中的方法。


<div class="box">
</div>
.box{
    width:200px;
    height:200px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
}

小编推荐:程序员导航

作为一名码农,随着平时工作的需要,这里收集了国内外很多优秀网站,这其中包括在线工具、在线运行、免费接口、在线资源、在线学习、技术论坛、技术博客等等,满足一般程序员日常需求。