前端經(jīng)常遇到對div進行水平垂直居中問題雄坪，網(wǎng)上也有很多解決方式寺惫，但是我們需要根據(jù)不同的前提條件和兼容性等來選擇合適的方案
方案1睬棚、position+margin:auto （未知元素寬高）
<style>
.wrap {
position:relative;
height:500px;
}
.inner {
width: 100px;
height: 100px;
background: pink;
}
.center {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
<div class="wrap">
<div class="inner center">love</div>
</div>
方案2表制、table-cell （未知元素寬高）
<style>
.content {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 300px;
height: 300px;
background-color: cadetblue;
}
.inner {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
background-color: pink;
}
</style>
<div class="content">
<div class="inner"> 111 </div>
</div>
方案3崎场、position+transform(css3存在兼容性問題) （未知元素寬高）
<style>
.wrap {
position:relative;
width:300px;
height:300px;
border:1px solid red;
}
.inner {
width: 100px;
height: 100px;
background: pink;
}
.center {
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
</style>
<div class="wrap">
<div class="inner center"></div>
</div>
或position+calc()(css3存在兼容性問題) （已知元素寬高）
.center {
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
或position+margin （已知元素寬高）
.center {
position: absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
}
方案4、flex布局（低版本瀏覽器不兼容） （未知元素寬高）
<style>
.wrap {
display: flex;
justify-content: center;
align-items: center;
height:500px;
}
.inner {
width: 100px;
height: 100px;
background: pink;
}
</style>
<div class="wrap">
<div class="inner">love</div>
</div>
