3-4垂直居中问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css_base</title>
<style type="text/css">
.div1{
height: 400px;
width: 100%;
border: 1px solid blue;
display: table-cell;
}
.div2{
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<img src="http://img1.sycdn.imooc.com/climg//58c137930001b08102000065.jpg">
<h1>Welcome to Website</h1>
<h2>CSS层叠样式，CSS层叠样式，CSS层叠样式，CSS层叠样式</h2>
</div>
</div>
</body>
</html>
1、经过验证当
.div1{
height: 400px;
width: 100%;
border: 1px solid blue;
display: table-cell;}时，显示的宽度不是100%，但是去掉display: table-cell;，宽度就会显示为100%，很奇怪的问题。
2、根据教程中，以上css的设置，不能实现垂直居中，chrome和火狐都不行
正在回答
.div1{
height: 400px;
width: 100%;
border: 1px solid blue;
display: table;
}
父元素要设为display：table
这里已经说了table-cell需要结合vertical-align:middle;才能使图片和文字在盒子里面居中显示，使用table-cell整体的盒子是没办法整体居中显示的，想要整个盒子居中显示，且里面的内容也居中显示，就不能使用table-cell，而是直接使用vertical-align:具体数值（譬如10px；）等进行设置文本内容居中显示，然后使用margin:0 auto使盒子整体居中显示。
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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>css_base</title> <style type="text/css"> .div1 { height: 400px; width: 800px; border: 1px solid blue; /*display: table-cell;*/ /*vertical-align:middle;*/ margin:0 auto; position:absolute; left:50%; top:50%; margin-top:-200px; margin-left:-400px; } .div2 { text-align: center; } .div2 img{ display:inline-block; vertical-align: -120px; } .div2 h1{ vertical-align:120px; } .div3 h2{ vertical-align: 120px; } </style></head><body> <div class="div1"> <div class="div2"> <img src="http://img1.sycdn.imooc.com/climg//58c137930001b08102000065.jpg"> <h1>Welcome to Website</h1> <h2>CSS层叠样式，CSS层叠样式，CSS层叠样式，CSS层叠样式</h2> </div> </div></body></html> |
祝学习愉快！
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧