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