相对于浏览器窗口垂直居中
感觉这节课教的和让做的压根不是一个东西，例子给的都是给限高的，但是最后的任务是相对于浏览器居中的，难道要把浏览器的高标出来吗！
多丽
2017-05-17
4 回答
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
.wrap{height:300px;background:#ccc}
.wrap1{
position:absolute;
height:100%;
}
</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><tbody><tr><td class="wrap1">
<div>
<img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</td></tr></tbody></table>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
table{
position:absolute;
height:100%;
}
.wrap{background:#ccc;}
</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>
<tbody>
<tr>
<td class="wrap1">
<div>
<img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
一个对象高度是否可以使用百分比显示，取决于对象的父级对象，Table在body之中，因此它的父级是body，而浏览器在标准模式下，是没有给body一个高度属性的，因此当设置height:100%;时，不会产生任何效果（内容根据高度自适应），而当给body设置了100%之后（相对于html标签），它的子级对象Table的height:100%;便发生作用了，这便是浏览器解析规则引发的高度自适应问题。值得注意：Firefox中的HTML标签不是 100%高度，因此给两个标签都定义为height:100%;以保证两个浏览器下均能够正常显示。
解决方案：（1）为<html>与<body>标签添加100%的高宽属性。 （2）可直接删除<!DOCTYPE>定义，这样浏览器会工作在Quriks Mode下，body与html默认有高宽度，但不推荐这种方式
<style type="text/css">
html,body{
width:100%;
height:100%;
}
<!--以下设置全屏-->
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
举报
0/150
提交
取消
