设置 为相对于浏览器窗口垂直居中。
设置 为相对于浏览器窗口垂直居中。
Evamdy_zhang
2018-05-26
2 回答
上面的不是针对浏览器窗口的，你咋知道浏览器窗口固定是500px的？
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
.wrap{height:300px;background:#ccc}
.test-table{
position: fixed;
left: 0;
top: 0;
height: 100%;
background-color:green;
}
/* .test-div{
position: fixed;
left: 0;
top: 0;
height: 100%;
background-color:green;
vertical-align: middle;
} */
.test{
display: inline-block;
}
</style>
</head>
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
<table class="test-table">
<tr>
<td class="test-td">
<div class="test">
<img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
.girl{
display:table-cell;
height:500px;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="girl">
<img src="
http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg
" title="害羞的小女生"/>
</div>
</body>
</html>
举报
0/150
提交
取消
