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使盒子整体居中显示。
<!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积分~
来为老师/同学的回答评分吧
0 星