CSS垂直居中實現(xiàn)方法大全
發(fā)布時間：2015-01-09 11:05:14 作者：佚名 
我要評論
我要評論本文給大家?guī)淼氖?種使用CSS實現(xiàn)垂直居中的方法，雖然各有優(yōu)缺點，但還都是蠻實用的，小伙伴們根據(jù)自己的項目情況，自由選擇吧。
摘要：
在我們制作頁面的時候經(jīng)常會遇到內(nèi)容垂直居中的需求，今天分享5種垂直居中的方法，每種方法都有自己的優(yōu)缺點，可以選擇自己喜歡的方式。以下代碼都經(jīng)過本人親自測試。
line-height：
復(fù)制代碼
代碼如下:<style>
.content {
height:240px;
line-height: 240px;
}
</style>
<div class="content">
vertical-align:middle;
</div>
:before：
復(fù)制代碼
代碼如下:<style>
.content {
height: 240px;
}
.child:before {
content: ' ';
display: block;
height: 120px;
}
</style>
<div class="content">
<div class="child">
vertical-align:middle;</p> <p></div></div>
padding-top：
復(fù)制代碼
代碼如下:<style>
.content {
height:240px;
}
.child {
padding-top: 120px;
}
</style>
<div class="content">
<div class="child">
vertical-align:middle;
</div>
</div>
position:absolute：
復(fù)制代碼
代碼如下:<style>
.content {
position:absolute;
height:240px;
}
.child {
position: relative;
top:50%;
}
</style>
<div class="content">
<div class="child">
vertical-align:middle;
</div>
</div>
display:table-cell;
復(fù)制代碼
代碼如下:<style>
#content {
display:table;
}
#child {
display:table-cell;
vertical-align:middle;
height: 300px;
}
</style>
<div id="content">
<div id="child">
vertical-align:middle;
</div>
</div>
小結(jié)：
以上代碼本人是在chrome下做的測試，可能有些在ie下會有問題，使用時請注意。
相關(guān)文章
css實現(xiàn)元素水平垂直居中常見的兩種方式實例詳解
這篇文章主要給大家介紹了css實現(xiàn)元素水平垂直居中的兩種方式，文中給出了完整的示例代碼供大家參考學(xué)習(xí)，對大家的學(xué)習(xí)或者工作具有一定的參考價值，有需要的朋友們下面來2017-04-23- 這篇文章主要介紹了CSS水平垂直居中的幾種方法總結(jié),垂直居中是布局中十分常見的效果之一,本文介紹了幾種方法，有興趣的可以了解一下。2016-12-19
- 這篇文章主要為大家詳細(xì)介紹了css讓容器水平垂直居中的7種方式,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-17
利用CSS3的flexbox實現(xiàn)水平垂直居中與三列等高布局
這篇文章給大家介紹了三個小節(jié)的內(nèi)容，其中包括關(guān)于css3中flexbox需要掌握的概念、flexbox實現(xiàn)水平垂直居中對齊和三列等高自適應(yīng)頁腳區(qū)域黏附底部的布局，有需要的可以參考2016-09-12- 這篇文章給大家演示了在不知道高度的情況下圖片如何垂直居中對齊，文中給出了實例代碼，有需要的朋友們可以參考借鑒。下面來一起看看吧。2016-09-12
- 這篇文章主要介紹了CSS定位“十字架”之水平垂直居中的相關(guān)資料，CSS如何定位“十字架”實現(xiàn)水平垂直居中效果，小編為大家解答，感興趣的小伙伴們可以參考一下2016-03-02
- 這篇文章主要介紹了CSS中垂直居中的簡單實現(xiàn)方法,包括用CSS3中用transform來實現(xiàn)的例子,需要的朋友可以參考下2015-07-06
- 這篇文章主要為大家介紹了CSS實現(xiàn)同一行的圖片和文字垂直居中對齊的方法,涉及css中vertical-align:middle屬性的使用技巧,需要的朋友可以參考下2015-05-12
這篇文章給大家整理四種css實現(xiàn)垂直居中效果，思路明了非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-06
