純css多種方法實(shí)現(xiàn)div中單行文字、多行文字及嵌套div垂直水平居中
發(fā)布時(shí)間：2014-04-24 15:30:48 作者：佚名 
我要評(píng)論
我要評(píng)論經(jīng)常遇到要居中的問(wèn)題，水平居中問(wèn)題比較好解決，而垂直居中問(wèn)題因?yàn)関ertical-align經(jīng)常失效，下面與大家分享下幾個(gè)不錯(cuò)的解決方法
學(xué)習(xí)過(guò)程中經(jīng)常遇到要居中的問(wèn)題，水平居中問(wèn)題比較好解決，而垂直居中問(wèn)題因?yàn)関ertical-align經(jīng)常失效，所以不容易實(shí)現(xiàn)，今天將自己總結(jié)的一些方法歸納于這邊。
1.div中單行文字垂直水平居中。條件：外層div高度已經(jīng)給定。代碼如下：
<style type="text/css">
.div3{
border:1px solid red;
text-align:center;
height:200px;
line-height:200px;
width:300px;
overflow:hidden;
}
</style>
<div class="div3">
2.div中多行文字垂直水平居中。條件：無(wú)。代碼如下：
<style type="text/css">
.div4{
border:1px solid red;
width:400px;
padding-bottom:20px;
padding-top:20px;
text-align:center;
}
</style>
<div class="div4">
div中多行文字垂直水平居中
div中多行文字垂直水平居中
div中多行文字垂直水平居
</div>
3.div中嵌套div，使得中間div垂直水平居中。條件：無(wú)。應(yīng)用table模擬法。代碼如下：
<style type="text/css">
.div1{
border:1px solid red;
display:table-cell; /* 模擬表格法*/
vertical-align:middle;
text-align:center;
height:200px;
width:200px;
}
.div2{
border:1px solid red;
margin:auto;
height:100px;
width:100px;
}
</style>
<div class="div1">
<div class="div2"></div>
</div>
4.div中嵌套div，使得中間div垂直水平居中。條件：外層div和內(nèi)層div的高度，寬度都已經(jīng)限定。通過(guò)設(shè)定margin來(lái)使得div居中。代碼如下：
<style type="text/css">
.div5{
border:1px solid red;
height:200px;
width:200px;
}
.div6{
border:1px solid red;
height:100px;
width:100px;
margin:50px 50px auto auto;
}
</style>
<div class="div5">
<div class="div6"></div>
</div>
5.div中嵌套div，使得中間div垂直水平居中。條件：外層div高度，寬度不限定，內(nèi)部div高度，寬度已知，且內(nèi)外層div的position都必須為absolute。通過(guò)設(shè)定top，left，margin來(lái)使得div居中。代碼如下：
<style type="text/css">
.div7{
position:absolute;
border:1px solid red;
height:50%;
width:50%;
}
.div8{
border:1px solid red;
height:100px;
width:100px;
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}
</style>
<div class="div7">
<div class="div8">aa</div>
</div>
以上就是我目前所知道的垂直水平都居中的方法，還有很多地方不足，比如ie6兼容性方面等等，希望大家能把自己知道的分享出來(lái)，讓我這個(gè)新手多多學(xué)習(xí)。
1.div中單行文字垂直水平居中。條件：外層div高度已經(jīng)給定。代碼如下：
復(fù)制代碼
代碼如下:<style type="text/css">
.div3{
border:1px solid red;
text-align:center;
height:200px;
line-height:200px;
width:300px;
overflow:hidden;
}
</style>
<div class="div3">
2.div中多行文字垂直水平居中。條件：無(wú)。代碼如下：
復(fù)制代碼
代碼如下:<style type="text/css">
.div4{
border:1px solid red;
width:400px;
padding-bottom:20px;
padding-top:20px;
text-align:center;
}
</style>
<div class="div4">
div中多行文字垂直水平居中
div中多行文字垂直水平居中
div中多行文字垂直水平居
</div>
3.div中嵌套div，使得中間div垂直水平居中。條件：無(wú)。應(yīng)用table模擬法。代碼如下：
復(fù)制代碼
代碼如下:<style type="text/css">
.div1{
border:1px solid red;
display:table-cell; /* 模擬表格法*/
vertical-align:middle;
text-align:center;
height:200px;
width:200px;
}
.div2{
border:1px solid red;
margin:auto;
height:100px;
width:100px;
}
</style>
<div class="div1">
<div class="div2"></div>
</div>
4.div中嵌套div，使得中間div垂直水平居中。條件：外層div和內(nèi)層div的高度，寬度都已經(jīng)限定。通過(guò)設(shè)定margin來(lái)使得div居中。代碼如下：
復(fù)制代碼
代碼如下:<style type="text/css">
.div5{
border:1px solid red;
height:200px;
width:200px;
}
.div6{
border:1px solid red;
height:100px;
width:100px;
margin:50px 50px auto auto;
}
</style>
<div class="div5">
<div class="div6"></div>
</div>
5.div中嵌套div，使得中間div垂直水平居中。條件：外層div高度，寬度不限定，內(nèi)部div高度，寬度已知，且內(nèi)外層div的position都必須為absolute。通過(guò)設(shè)定top，left，margin來(lái)使得div居中。代碼如下：
復(fù)制代碼
代碼如下:<style type="text/css">
.div7{
position:absolute;
border:1px solid red;
height:50%;
width:50%;
}
.div8{
border:1px solid red;
height:100px;
width:100px;
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}
</style>
<div class="div7">
<div class="div8">aa</div>
</div>
以上就是我目前所知道的垂直水平都居中的方法，還有很多地方不足，比如ie6兼容性方面等等，希望大家能把自己知道的分享出來(lái)，讓我這個(gè)新手多多學(xué)習(xí)。
相關(guān)文章
CSS實(shí)現(xiàn)多層嵌套結(jié)構(gòu)最外層旋轉(zhuǎn)其它層不旋轉(zhuǎn)效果
這篇文章主要介紹了CSS實(shí)現(xiàn)多層嵌套結(jié)構(gòu)最外層旋轉(zhuǎn)其它層不旋轉(zhuǎn)效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨2020-02-05LESS 讓css也支持變量，運(yùn)算符，include,嵌套規(guī)則等等
最近在網(wǎng)上看到1個(gè)很有意思的CSS擴(kuò)展，這里介紹給大家。LESS 最早是1個(gè)ruby的gem，用于擴(kuò)展css的語(yǔ)法，用了LESS后，可以在css中使用變量，運(yùn)算符，include,嵌套規(guī)則等等。2010-07-04- 除非你的網(wǎng)站只有一頁(yè),不然你一定會(huì)用的導(dǎo)航的.事實(shí)上,導(dǎo)航在網(wǎng)頁(yè)設(shè)計(jì)中是最重要部分之一.你要用很多時(shí)間去考慮如何讓瀏覽者更容易訪問(wèn)你的網(wǎng)站.2009-11-30
簡(jiǎn)單學(xué)習(xí)css組合與CSS嵌套的寫法
網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：簡(jiǎn)單學(xué)習(xí)css組合與CSS嵌套的寫法. CSS組合 你不必重復(fù)有相同屬性的多個(gè)選擇符，你只要用英文逗號(hào)（,）隔開選擇符就可以了2009-04-02
CSS 即將支持嵌套,SASS/LESS 等預(yù)處理器該何去何從
隨著 CSS 自定義屬性（CSS Variable）的大規(guī)模兼容，到如今 CSS 即將支持嵌套，一些預(yù)處理器的核心功能已經(jīng)被 CSS 原生支持，這是否表示 SASS/LESS 等預(yù)處理器已無(wú)用武之地2021-08-10
