純css多種方法實現(xiàn)div中單行文字、多行文字及嵌套div垂直水平居中
發(fā)布時間:2014-04-24 15:30:48 作者:佚名
我要評論

經(jīng)常遇到要居中的問題,水平居中問題比較好解決,而垂直居中問題因為vertical-align經(jīng)常失效,下面與大家分享下幾個不錯的解決方法
學(xué)習(xí)過程中經(jīng)常遇到要居中的問題,水平居中問題比較好解決,而垂直居中問題因為vertical-align經(jīng)常失效,所以不容易實現(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中多行文字垂直水平居中。條件:無。代碼如下:
<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垂直水平居中。條件:無。應(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)限定。通過設(shè)定margin來使得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。通過設(shè)定top,left,margin來使得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兼容性方面等等,希望大家能把自己知道的分享出來,讓我這個新手多多學(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中多行文字垂直水平居中。條件:無。代碼如下:
復(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垂直水平居中。條件:無。應(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)限定。通過設(shè)定margin來使得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。通過設(shè)定top,left,margin來使得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兼容性方面等等,希望大家能把自己知道的分享出來,讓我這個新手多多學(xué)習(xí)。
相關(guān)文章
CSS實現(xiàn)多層嵌套結(jié)構(gòu)最外層旋轉(zhuǎn)其它層不旋轉(zhuǎn)效果
這篇文章主要介紹了CSS實現(xiàn)多層嵌套結(jié)構(gòu)最外層旋轉(zhuǎn)其它層不旋轉(zhuǎn)效果,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨2020-02-05LESS 讓css也支持變量,運算符,include,嵌套規(guī)則等等
最近在網(wǎng)上看到1個很有意思的CSS擴展,這里介紹給大家。LESS 最早是1個ruby的gem,用于擴展css的語法,用了LESS后,可以在css中使用變量,運算符,include,嵌套規(guī)則等等。2010-07-04- 除非你的網(wǎng)站只有一頁,不然你一定會用的導(dǎo)航的.事實上,導(dǎo)航在網(wǎng)頁設(shè)計中是最重要部分之一.你要用很多時間去考慮如何讓瀏覽者更容易訪問你的網(wǎng)站.2009-11-30
- 網(wǎng)頁制作Webjx文章簡介:簡單學(xué)習(xí)css組合與CSS嵌套的寫法. CSS組合 你不必重復(fù)有相同屬性的多個選擇符,你只要用英文逗號(,)隔開選擇符就可以了2009-04-02
CSS 即將支持嵌套,SASS/LESS 等預(yù)處理器該何去何從
隨著 CSS 自定義屬性(CSS Variable)的大規(guī)模兼容,到如今 CSS 即將支持嵌套,一些預(yù)處理器的核心功能已經(jīng)被 CSS 原生支持,這是否表示 SASS/LESS 等預(yù)處理器已無用武之地2021-08-10