table-cell實現垂直居中還有一個比較大的缺點
table-cell實現垂直居中必須要給table-cell元素規定一個width，而且不能設置成100%，像老師這樣剛好設置的1000px躲避了這個問題
6 回答
舉報
0/150
提交
取消
table-cell實現垂直居中必須要給table-cell元素規定一個width，而且不能設置成100%，像老師這樣剛好設置的1000px躲避了這個問題
2019-11-03
舉報
2020-12-02
這是表寬計算的問題，自己再加個parent-fix容器，設置該容器“display: table; width: 100%”
2019-11-10
##不要吵了，我直接上圖吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平垂直居中</title>
<style type="text/css">
#parent{
width: 100%;
height: 600px;
background-color: #CCCCCC;
text-align: center;
display: table-cell;
vertical-align: middle;
}
#child{
width: 200px;
height: 200px;
background-color: #C9394A;
display: inline-block;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
水平垂直居中
</div>
</div>
</body>
</html>
2019-11-07
width：100%撐不開
2019-11-03
你是不是對垂直居中有什么誤解？?
2019-11-03
垂直居中，設高度就可以，和寬度沒關系
2019-11-03
其實不需要，它會根據子元素的內容寬度而自動撐開