1、Line-height + inline-block

<div class="box box2">
?<div class="content">
? ?立馬來看實際完成的
? ?效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ ?</div>
</div>

h2{
?text-align: center;
}
.box{
?width: 500px;
?border: 1px solid #f00;
?margin: auto;
?line-height: 200px;
?text-align: center;
}
.box2 .content{
?display: inline-block;
?height: auto;
?line-height:1;
?width: 400px;
?background: #ccc;
}

2、:before + inline-block

唯獨需要特別處理掉inline-block元素之間的4-5px空間這個小缺陷，利用font-size：0

<h2>:before + inline-block</h2>
<div class="box box3">
?<div class="content">
? ?立馬來看實際完成的 ?
? ?效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ ?</div>
</div>


h2{
?text-align: center;
}
.box{
?width: 500px;
?height: 250px;
?border: 1px solid #f00;
?margin: auto;
?text-align: center;
　 font-size:0;
}
.box::before{
?content:'';
?display: inline-block;
?height: 100%;
?width: 0;
?vertical-align: middle;
}
.box .content{
?width: 400px;
?background: #ccc;
?display: inline-block;
?vertical-align: middle;
font-size:14px;
}

3、absolute + margin auto

當元素設置為絕對定位后，假設它是抓不到整體可運用的空間范圍，所以margin:auto會失效，但當你設置了top:0;bottom:0;時，絕對定位元素就抓到了可運用的空間了，這時你的margin:auto就生效了（神奇吧），如果你的絕對定位元素需要水平居中于父層，那你同樣可以設定left:0;right:0;來讓絕對定位元素取得空間可運用范圍，再讓marign-left與margin-right設定為auto即可居中。但此方式的缺點是你的定位元素必須有固定的寬高（百分比也算）才能正常居中。

<h2>absolute + translate(-50%, -50%)</h2>
<div class="box box5">
?<div class="content">
? ?立馬來看實際完成的 ?
? ?效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ ?</div>
</div>


h2{
?text-align: center;
}
.box{
?width: 500px;
?height: 250px;
?border: 1px solid #f00;
?margin: auto;
?position: relative;
}
.content{
?width: 400px;
?background: #ccc;
?height: 70px;
?position: absolute;
?top: 0;
?right: 0;
?bottom: 0;
?left: 0;
?margin: auto;
}

4、absolute + translate

<h2>absolute + margin: auto</h2>
<div class="box box6">
?<div class="content">
? ?立馬來看實際完成的 ?
? ?效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ ?</div>
</div> h2{
?text-align: center;
}
.box{
?width: 500px;
?height: 250px;
?border: 1px solid #f00;
?margin: auto;
?position: relative;
}
.box5 .content{
?width: 400px;
?background: #ccc;
?position: absolute;
?top:50%;
?left: 50%;
?transform: translate(-50%, -50%);
}

5、Flex + align-items

<h2>Flex + align-items</h2>
<div class="box box7">
?<div class="content">
? ?立馬來看實際完成的 ? ?
? ?效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ ?</div>
</div> h2{
?text-align: center;
}
.box{
?width: 500px;
?height: 250px;
?border: 1px solid #f00;
?margin: auto;
?display: flex;
?justify-content: center;
?align-items: center;
}
.content{
?width: 400px;
?background: #ccc;
}

?6、Flex + margin

由于Flex元素對空間解讀的特殊性，我們只要在父層元素設定display:flex，接著在需要垂直居中的元素上設定margin:auto，即可自動居中

<h2>.Flex + margin</h2>
<div class="box box9">
?<div class="content">
? ?立馬來看實際完成的 ? ?
? ?效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ ?</div>
</div> h2{
?text-align: center;
}
.box{
?width: 500px;
?height: 250px;
?border: 1px solid #f00;
?margin: auto;
?display: flex;
}
.content{
?width: 400px;
?background: #ccc;
?margin: auto;
}

?

?

?

?

?

?

?

?

轉載于:https://www.cnblogs.com/zhangshengwang/p/9528824.html

總結

以上是生活随笔為你收集整理的css垂直居中技巧总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。