CSS實現垂直水平居中的方法
阿新 • • 發佈:2019-02-19
在網上查到了很多種居中方法,但是都有一些侷限,如通過line-height實現的情況不能設定100%。今天突然靈光一閃想到了一個辦法,試了試感覺效果不錯。下面直接上程式碼。
html:
<div class="body">
<div class="pos"></div>
<div class="middle"></div>
</div>
css:
.body{ position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; text-align: center; background-color: black; } .pos{ display: inline-block; vertical-align: middle; height: 100%; } .middle{ display: inline-block; vertical-align: middle; width: 200px; height: 150px; background-color: white; }
效果:
思路:
效果是.middle(白塊)在.body(黑背景)中垂直水平居中,在改變視窗大小時依然是居中的。
水平居中很容易實現,將.body中text-align設定成center就OK了。
垂直居中就相對複雜一些了,就是相當於通過.middle的垂直中點與.pos的垂直中點對齊實現。將.pos和.middle的display設定成inline-block、vertical-align設定成middle,將.pos的height設定成100%,這樣.pos的垂直中點就與.body的垂直中點重合了。