html/css 通用布局水平垂直居中方法
一般子元素居中方法
Ps:宽度100%无效，对于position:absolute无效
.child-element {
width: 100px;
height: 100px;
background: blue;
margin: 0 auto;
}绝对布局子元素居中方法1
Ps:只限于子元素宽度固定时才有效
但当子元素宽度改变时，无法自适应：点我改变宽度.
.child-element {
position: absolute;
width: 100px;
height: 100px;
left: calc(50% - 50px);
background: red;
}绝对布局子元素居中方法2(自适应居中)(推荐)
Ps:position:relative也可以使用
我是绝对布局，我可以自适应水平垂直居中
现在当我们改变宽度时，也会自动居中： 点我改变宽度.
.child-element {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
我是相对布局，我可以自适应垂直水平居中
.child-element {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}适配各浏览器
.child-element {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%); /* IE 9 */
-moz-transform: translate(-50%,-50%); /* Firefox */
-webkit-transform: translate(-50%,-50%); /* Safari 和 Chrome */
-o-transform: translate(-50%,-50%); /* Opera */
}
