table-cell实现垂直居中还有一个比较大的缺点
来源：4-2 居中布局的第一种解决方案及优缺点
Civo
2019-11-03 00:50
table-cell实现垂直居中必须要给table-cell元素规定一个width，而且不能设置成100%，像老师这样刚好设置的1000px躲避了这个问题
写回答
关注
6回答
-
- ccyy_阿亮
- 2020-12-02 19:07:03
这是表宽计算的问题，自己再加个parent-fix容器，设置该容器“display: table; width: 100%”
-
- 杨超越赐我offer
- 2019-11-10 18:42:09
##不要吵了，我直接上图吧
<!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>
-
- weixin_慕盖茨1344029
- 2019-11-07 08:20:03
width：100%撑不开
-
- 丨Serendipity
- 2019-11-03 20:04:28
你是不是对垂直居中有什么误解？?
-
- 丨Serendipity
- 2019-11-03 20:00:02
垂直居中，设高度就可以，和宽度没关系
-
- 丨Serendipity
- 2019-11-03 10:44:00
其实不需要，它会根据子元素的内容宽度而自动撑开
一课全面掌握主流CSS布局
一网打尽CSS主流布局方案，一步掌握页面布局技巧.
5276 学习 · 60 问题
相似问题