DIV居中的幾種方法
在開發過程中,很多需求需要我們居中一個div,比如html文檔流當中的一塊div,比如彈出層內容部分這種脫離了文檔流等。不同的情況有不同的居中方式,接下來就分享下一下幾種常用的居中方式。
1.text-align:center方式
代碼:
1 2 3 4 5 |
< div class="center">
< span class="center_text">
123
</ span >
</ div >
|
.center{ text-align:center; } center_text{ display:inline-block; width:500px }
這種方式可以水平居中塊級元素中的行內元素,如inline,inline-block;
但是如果用來居中塊級元素中的塊級元素時,如div中的div,一旦內層的div有自己的寬度,這種方法就會失效。只能讓裏面div的文字等內容居中,而div仍然是左對齊的。
還有一種情況,當內部的元素脫離了文檔流,display:absolute的情況下,不管是否是塊級元素,都會居中,但是這種居中不是基於內部div的內容的,而是內部div最左端,內部div的最左端在div的中間(前提外部div設置了position:relative/absolute/fixed);
2.margin:0 auto方式
代碼:
1 2 3 4 5 |
< div class="center">
< span class="center_text">
我是塊級元素,我是塊級元素,我給自己設了display:block
</ span >
</ div >
|
1 2 3 4 |
center_text{
display : block ;
width : 500px <br> margin: 0 auto ;
}
|
這種對齊方式要求內部元素(.content_text)是塊級元素,並且不能脫離文檔流(如設置position:absolute),否則無效。
3.脫離文檔流的居中方式。
這種通常應用在自定義彈框當中,把背景層設置成透明灰色,內容居中顯示在最前面。
代碼:
1 2 3 4 |
< div class="mask">
< div class="content">< br > 我是要居中的板塊
</ div >
</ div >
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.mask{
display : block ;
position : fixed ;
top : 0 ;
left : 0 ;
width : 100% ;
height : 100% ;
background : #000 ;
filter: alpha(opacity= 30 );
-ms-filter: "alpha(opacity=30)" ;
opacity: . 3 ;
z-index : 10000 ;
}
. center {
display : block ;
position : fixed ;
_position : absolute ;
top : 50% ;
left : 50% ;
width : 666px ;
height : 400px ;
margin-left : -333px ;
margin-top : -200px ;
z-index : 10001 ;
box-shadow: 2px 2px 4px #A0A0A0 , -2px -2px 4px #A0A0A0 ;
background-color : #fff ;
}
|
效果:
這種居中方式,把內部div設置寬高之後,再設置top、left各為50%,設置完之後,這裏是按照左端居中的,接著我們使用負邊距的方式調整,將margin-top設置為負的高度的一半,margin-left設置為負的寬度的一半,就可以居中了。
這種方式還有一種居中方法就是設置margin:-(內部div高度的一半) auto;這用就不用設置left的值了。
4.display:table-cell
display:table-cell配合width,text-align:center,vertical-align:middle
讓大小不固定元素垂直居中,這個方式將要對其的元素設置成為一個td,float、
absolute等屬性都會影響它的實現,不響應margin屬性;
代碼:
1 2 3 4 |
< div class="center">
< div class="center_text">
1111111< br > </ div >
</ div >
|
1 2 3 4 5 6 7 8 9 |
. center {
display : table;
width : 100% ;
}
.center_text {
display : table-cell ;
text-align : center ;
vertical-align : middle ;
}
|
5.垂直居中
行內元素的垂直居中把height和line-height的值設置成一樣的即可。
代碼:
1 2 3 4 |
< div class="center">
< span class="center_text">
我是要居中的內容< br > </ span >
</ div >
|
1 2 3 |
center {
height: 40px ;
line-heigth: 40px ;<br>}
|
這樣內部的span標簽就可以居中了。
6.使用css3的translate水平垂直居中元素
代碼:
1 2 3 |
< div class="center">
< div class="center_text">
我是要居中的內容< br > </ div > < br ></ div >
|
1 2 3 4 5 6 7 8 9 10 11 |
. center {
position : relative ;
height : 500px ;}
.center_text{
position : absolute ;
top : 50% ;
left : 50% ;
transform: translate( -50% , -50% );
width : 300px ;
height : 600px ;
}
|
這種方式將脫離文檔流的元素,設置top:50%,left:50%,然後使用transform來向左向上便宜半個內元素的寬和高。
7.使用css3計算的方式居中元素calc
代碼:
1 2 3 4 |
< div class="center">
< div class="center_text">
我是要居中的內容< br > </ div >
</ div >
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
. center {
position : relative ;
height : 300px ;
width : 1000px ;
border : 1px solid #ccc ;
}
.center_text{
position : absolute ;
top : calc( 50% - 50px );
left : calc( 50% - 150px );
width : 300px ;
height : 100px ;
border : 1px solid #000 ;
}
|
效果:
這種方式同樣是將脫離文檔流的元素,然後使用計算的方式來設置top和left;
以上是幾種居中的方式,前3種是比較常用的,只要了解原理,後幾種都是這個原理的不同實現方式。
DIV居中的幾種方法