本文共 952 字，大约阅读时间需要 3 分钟。
基本是网上看来的，前2种用的较多，第三种是有点黑科技的写法
如果只是水平居中，就可以直接使用margin:0 auto;
第一种：使用translate
属于transform的一个方法，将div进行百分比xy轴位移。
.d1_1{ width: 200px; height: 200px; background-color: red;}.d2_1{ width: 100px; height: 100px; background: blue; transform: translate(50%,50%);/*位移*/} 当然，最好使用相对定位加绝对定位先，为了不影响其他元素排列
第二种：使用弹性布局flex
大多数用这种方式，设置容器的属性即可，不过要注意浏览器兼容
.d3{ width: 200px; height: 200px; background-color: red; display: flex; align-items: center;/*垂直居中*/ justify-content: center;/*水平居中*/}.d4{ width: 100px; height: 100px; background: blue;}
第三种：这种是黑科技，使用vertical-align
不建议多用也比较麻烦，用到了水平居中、变为行内元素，居中
.d5{ width: 200px; height: 200px; background-color: red; text-align: center;}.d5::after{ content: ''; display: inline-block; height: 100%; vertical-align: middle;}.d6{ width: 100px; height: 100px; background-color: blue; display: inline-block; vertical-align: middle;}
转载地址：http://rmbbz.baihongyu.com/