对于DOM居中大家都不陌生，几乎开发pc或者移动端多会遇到这个问题，但是css对DOM居中是有很多种方法的，下面我来总结下。
1.第一种情况是父级高度宽度不确定
//display:flex
<div id="box">
<div id="inner">
内容
</div>
</div>
#box{
width: 300px;
height: 300px;
background: #999;
display: flex;
justify-content:center;
align-items:Center;
}
#inner{
width: 100px;
height: 100px;
background:green;
}
方法一浏览器效果
//通过定位子级，宽高和top left 设置百分比 等于100%
<div id="box">
<div id="inner">
内容2
</div>
</div>
#box{
width: 300px;
height: 300px;
background: #999;
text-align: center;
position: relative;
}
#inner{
position: absolute;
top: 30%;
left: 30%;
width: 40%;
height: 40%;
background:green;
}
方法二浏览器效果
2.第二种情况是父级宽度高度确定
//利用定位加css3 transform
<div id="box">
<div id="inner">
内容
</div>
</div>
#box{
width: 300px;
height: 300px;
background: #999;
position: relative;
}
#inner{
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background:red;
transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
}
方法一浏览器显示效果
//绝对定位和负边距
<div id="box">
<div id="inner">
方法二
</div>
</div>
#box{
width: 300px;
height: 300px;
background: #999;
position: relative;
}
#inner{
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background:red;
margin-top: -50px;//自己高度的的一半
margin-left: -50px; //自己宽度的一半
text-align: center;
}
方法二浏览器效果
//table-cell
<div id="box">
<div id="inner">
方法三
</div>
</div>
#box{
width: 300px;
height: 300px;
background: #999;
display: table-cell;
vertical-align: middle;
text-align: center;
}
#inner{
margin: 0 auto;
width: 100px;
height: 100px;
background:red;
text-align: center;
}
方法三到浏览器显示效果
