盡量不用js<!DOCTYPE HTML><html lang="en-US"><head>
<meta charset="UTF-8">
<title></title></head><body>
<p>垂直居中</p></body></html>
3 回答
料青山看我應(yīng)如是
TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超8個(gè)贊
HTML：
<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title></title></head><body> <div id="c"> <p>垂直居中</p> </div></body></html>
CSS：
#c { display:table; height:400px;
}#c p { display: table-cell; vertical-align: middle;
}
紫衣仙女
TA貢獻(xiàn)1839條經(jīng)驗(yàn) 獲得超15個(gè)贊
1、table-cell方法，ls有講
2、如果知道子元素高度的話，可以有另一種好點(diǎn)的辦法。假設(shè)子元素高度是100px?？梢园迅冈卦O(shè)為position: relative；然后父元素和子元素中間加一層position: absolute; top: 50%的div；最后最里面的子元素position: relative; top: -50px;
3、如果不用擔(dān)心瀏覽器兼容性的話，可以用CSS transform（但是IE6-8不支持）。類似方法二，但是不需要知道元素高度。子元素最后向上平移(translate) 50%即可。
幕布斯7119047
TA貢獻(xiàn)1794條經(jīng)驗(yàn) 獲得超8個(gè)贊
對(duì)于不固定寬高的元素要居中的方法：父類div設(shè)置text-align:center.該需要居中的元素設(shè)置display:inline-block
添加回答
舉報(bào)
0/150
提交
取消