欢迎使用CSDN-markdown编辑器

来源：互联网发布：阿里云服务器代理商编辑：程序博客网时间：2024/06/06 19:44

水平垂直居中的几种写法

容器大小尺寸固定

// width, height 分别为容器的宽高elem {    position: absolute;    left: 50%;    top: 50%;    margin-left: -width/2;    margin-top: -height/2;}

优点：方法简单，兼容性好
缺点：容器宽高是要已知固定的，不然就要借助js改变对应margin值

容器大小尺寸不固定

elem {    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%, -50%)}

优点：不要在乎容器的尺寸大小
缺点：css3兼容性问题

容器大小尺寸不固定

elem {    vertical-align: middle;    text-align: center}elem:after {    content: "";    display: inline-block;    width: 0;    height: 100%;    vertical-align: middle}

优点：不用在乎容器的尺寸，兼容性好
缺点：max-width只能达到95%左右
实现原理：让容器相对与它的兄弟伪类实现居中对齐

0 0