對(duì)于DOM居中大家都不陌生肛度，幾乎開(kāi)發(fā)pc或者移動(dòng)端多會(huì)遇到這個(gè)問(wèn)題，但是css對(duì)DOM居中是有很多種方法的投慈，下面我來(lái)總結(jié)下承耿。
1.第一種情況是父級(jí)高度寬度不確定
//display:flex
<div id="box">
<div id="inner">
內(nèi)容
</div>
</div>
#box{
width: 300px;
height: 300px;
background: #999;
display: flex;
justify-content:center;
align-items:Center;
}
#inner{
width: 100px;
height: 100px;
background:green;
}
方法一瀏覽器效果
//通過(guò)定位子級(jí)，寬高和top left 設(shè)置百分比 等于100%
<div id="box">
<div id="inner">
內(nèi)容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.第二種情況是父級(jí)寬度高度確定
//利用定位加css3 transform
<div id="box">
<div id="inner">
內(nèi)容
</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%);
}
方法一瀏覽器顯示效果
//絕對(duì)定位和負(fù)邊距
<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;
}
方法三到瀏覽器顯示效果
