div水平居中的N種方法
一奥务、單行垂直居中
如果一個(gè)容器中只有一行文字物独，對(duì)它實(shí)現(xiàn)居中相對(duì)比較簡(jiǎn)單，我們只需要設(shè)置它的實(shí)際高度height和所在行的高度line-height相等即可氯葬。
div{
height:25px;
line-height:25px;
overflow:hidden;
}
這段代碼很簡(jiǎn)單挡篓，后面使用overflow:hidden的設(shè)置是為了防止內(nèi)容超出容器或者產(chǎn)生自動(dòng)換行，達(dá)不到垂直居中的效果帚称。
單行文字實(shí)現(xiàn)垂直居中
body{font-size:12px;font-family:tahoma;}
div{
height:25px;
line-height:25px;
background-color:#FFCCFF;
}
二、多行未知高度文字的垂直居中
如果一段內(nèi)容闯睹，它的高度是可變的那么我們就可以使用上一節(jié)講到的實(shí)現(xiàn)水平居中時(shí)使用到的最后一種方法戏羽，就是設(shè)定Padding，使上下的padding值相同即可楼吃。同樣的始花，這也是一種“看起來(lái)”的垂直居中方式，它只不過(guò)是使文字把
div{
padding:25px;
line-height:30px;
}
優(yōu)點(diǎn)：它可以在任何瀏覽器上運(yùn)行，并且代碼很簡(jiǎn)單浮创，只不過(guò)這種方法應(yīng)用的前提就是容器的高度必須是可伸縮的忧吟。
三、多行文本固定高度的居中
CSS中的vertical-align屬性只應(yīng)用于inline level, inline-block level及table-cells元素上斩披；其次vertical-align的對(duì)齊就基于每個(gè)line box（行框）的溜族。但是在CSS中還有一個(gè)display屬性能夠模擬讹俊，所以我們可以使用這個(gè)屬性來(lái)讓
注意：display:table和display:table-cell的使用方法煌抒，前者必須設(shè)置在父元素上仍劈，后者必須設(shè)置在子元素上，因此我們要為需要定位的文本再增加一個(gè)
#wrap {
display:table;
width:100%;
background-color:#FFCCFF;
}
#content {
display:table-cell;
vertical-align:middle;
height:500px;
}
來(lái)看例子：
多行文字實(shí)現(xiàn)垂直居中
#wrap {
display:table;
width:100%;
background-color:#FFCCFF;
}
#content {
display:table-cell;
vertical-align:middle;
text-align:center;
height:400px;
}
現(xiàn)在我們要使這段文字垂直居中顯示寡壮！
content可以動(dòng)態(tài)改變高度(不需在 CSS 中定義)贩疙。當(dāng)wrap里沒(méi)有足夠空間時(shí)，content不會(huì)被截?cái)?况既。
這個(gè)方法應(yīng)該是很理想了这溅，但是只能在IE8及以上瀏覽器以及非IE瀏覽器下才能看到效果
五、多行文本垂直水平的居中(未知寬高)
#content{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
利用了transform: translate(-50%, -50%);
示例如下：
多行文字實(shí)現(xiàn)垂直居中
#content {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
height:400px;
width:400px;
background-color:#FFCCFF;
}
Content Here
六棒仍、多行文本固定寬高的居中
#content {
background:#ddd;
position:absolute;
top:50%;
left:50%;
width:200px;
height:100px;
margin-left:-100px;
margin-top:-50px;
/* negative half of the width */
/* negative half of the height */
}
示例如下：
多行文本固定高度的居中
#content {
background:#ddd;
position:absolute;
top:50%;
left:50%;
width:200px;
height:100px;
margin-left:-100px;
margin-top:-50px;
}
Content Here
優(yōu)點(diǎn)：適用于所有瀏覽器悲靴、不需要嵌套標(biāo)簽
缺點(diǎn)：沒(méi)有足夠空間時(shí)，content會(huì)消失(類(lèi)似div 在body內(nèi)莫其，當(dāng)用戶縮小瀏覽器窗口癞尚，滾動(dòng)條不出現(xiàn)的情況)
七、多行文本固定寬高的居中
這個(gè)方法使用了一個(gè)position:absolute乱陡，有固定寬度和高度的div浇揩。這個(gè)div被設(shè)置為top:0;bottom:0;。但是因?yàn)樗泄潭ǜ叨鹊叭欤鋵?shí)并不能和上下都間距為 0临燃，因此margin:auto;會(huì)使它居中。使用margin:auto;使塊級(jí)元素垂直居中是很簡(jiǎn)單的烙心。
#content {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:240px;
width:70%;
}
示例如下：
多行文本固定高度的居中
#content {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:240px;
width:70%;
background:#ddd;
}
Content Here
優(yōu)點(diǎn)：簡(jiǎn)單
缺點(diǎn)：IE(IE8 beta)中無(wú)效膜廊；無(wú)足夠空間時(shí)，content 被截?cái)嘁穑遣粫?huì)有滾動(dòng)條出現(xiàn)
八爪瓜、居中一個(gè)浮動(dòng)元素
奇怪怎么讓一個(gè)浮動(dòng)元素居中，不過(guò)還是奉上代碼直接看效果吧
HTML:
居中居中居中居中居中居中
居中居中居中居中居中居中居中居中居
中居中居中居中居中居中居中居中居中居
中居中居中居中居中居中居中
CSS:
.wrap{
float:left;
width:100%;
height:400px;
background-color:#ccc;
}
.ele{
float:left;
position:relative;
left:50%;
top:50%;
}
.ele-inner{
position:relative;
left:-50%;
-webkit-transform:translate3d(0,-50%,0);
transform:translate3d(0,-50%,0);
background-color:#333;
color:#fff;
}
這種方法的原理匙瘪，首先是利用float屬性將需要居中的元素的父元素.ele的寬度收縮铆铆，然后left:50%將.ele的左邊和水平中線對(duì)齊，這個(gè)時(shí)候還沒(méi)居中丹喻，還需要將其往回拉自身寬度的50%薄货，于是.ele-inner便是真正需要水平居中的元素，我給它一個(gè)position:relative碍论，將其往回拉自身寬度50%就行了谅猾。對(duì)于垂直方向，依然是先將.ele top:50%到垂直方向中點(diǎn)，但是這時(shí)給.ele-inner top:50%是不起作用的税娜，因?yàn)槿绻麤](méi)給父元素明確高度的話坐搔，這個(gè)50%是計(jì)算不出來(lái)的，因此敬矩，就有了transform : translate3d(0, -50%, 0)概行。
這種方法的好處是元素可以不定寬，任何時(shí)候都可以做到居中弧岳。
缺點(diǎn)：當(dāng)居中元素的父元素left:50%時(shí)凳忙，如果元素寬度足夠大，會(huì)超出外面的容器禽炬，而如果外面的容器又正好是overflow:auto的話消略，那就會(huì)在外面產(chǎn)生滾動(dòng)條。
九瞎抛、inline-block實(shí)現(xiàn) 未知尺寸元素水平垂直居中
十、text-align:center + absolute
text-aign:center本來(lái)是不能直接作用于absolute元素的却紧，但是沒(méi)有給其left等值的行級(jí)absolute元素是會(huì)受文本的影響的
HTML
center + absolute
CSS(less)
.wrap{
text-align:center;
width:100%;
height:400px;
background-color:#ccc;
font-size:0;
}
.ele{
position:absolute;
margin-left:-(100px/2);
margin-top:(400px-100px)/2;
width:100px;
height:100px;
display:inline-block;
background-color:#333;
color:#fff;
font-size:18px;
}
