元素垂直水平居中

本文地址：http://www.cnblogs.com/veinyin/p/7606390.html

1 已知宽高

1.1 定位值上下左右给0

 1 /* 父盒子垂直水平居中 */
 2 .box{
 3     background-color: #cccccc;
 4     height: 200px;
 5     width: 400px;
 6     position: absolute;
 7     top: 0;
 8     left: 0;
 9     right:0;
10     bottom: 0;
11     margin: auto;
12 }

只能用于给的宽高的盒子，十分方便，笔者常用

1.2 左上角居中再拉回来

1.2.1 需要计算偏移量

 1 .box {
 2    position: absolute;
 3    left: 50%;
 4    top: 50%;
 5    background-color: #cccccc;
 6    width: 400px;
 7    height: 200px;
 8    margin-left: -200px;
 9    margin-top: -100px;  /* 需根据宽高计算偏移量 */
10 }

需要知道宽高还得计算，笔者基本不用，嫌麻烦。。。

1.2.2 不用计算偏移量

1 .box {
2     position: absolute;
3     left: 50%;
4     top: 50%;
5     background-color: #cccccc;
6     width: 400px;
7     height: 200px;
8     transform:  translate(-50%,-50%);  /* 此处不用自己计算偏移量 */ 
9 }

IE不支持，一口老血。。。

2 元素宽高不确定

2.1 同1.2.2

2.2 flex以后再写个专题

【推广】免费学中医，健康全家人

原文地址：https://www.cnblogs.com/veinyin/p/7606390.html