                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

如果实现相对浏览器剧中

<!DOCTYPE HTML>
<html>
<head>
<meta  charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
.container{
    height:300px;
background:#ccc;

display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
.abc{
    border:1px red solid;
    position:absolute;
    top:0;
    left:0;
    height:100%;
    display:table-cell;
    vertical-align:middle;
}
</style>
</head>

<body>
<div class="container">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
    </div>
</div>
<!--下面是代码任务区-->
<div class="abc">
    <img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</body>
</html>

C0EEC3F7BBAA

2016-07-05

源自：初识HTML(5)+CSS(3)-升级版 15-10

关注问题我要回答

1188

操作

收起

6 回答

损失函数回答被采纳 +3 积分
2016-07-05

应该是abc的div的问题，你可以换成span标签试试。

这个网站应该对这个问题有帮助，http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/

0 回复有任何疑惑可以回复我~

收起回答

C0EEC3F7BBAA 提问者

非常感谢！

2016-07-06 回复有任何疑惑可以回复我~

Gemmy
2016-09-13

楼主，同求一个比较清晰的答案！

0 回复有任何疑惑可以回复我~

收起回答

慕粉3791758
2016-08-13

楼主,现在是否清楚了,同求答案

0 回复有任何疑惑可以回复我~

收起回答

损失函数
2016-07-05

在你的代码中，abc的div中设置它的高度为100%，其实是它填充内容的100%,也就是说这个div中的内容高度是多少那么这个div的高度就是多少，所以依照你的代码，abc的div的高度并不是屏幕的高度。

0 回复有任何疑惑可以回复我~

收起回答

C0EEC3F7BBAA 提问者

如果是这样··那红色边框为什么是浏览器高度而不是图片高度呢

2016-07-05 回复有任何疑惑可以回复我~

慕粉3688811 回复 C0EEC3F7BBAA 提问者

红色边框是abc的高度呀，图片是DIV里的内容.你也没对img设置呀，你是对abc设置vertical-align:middle.

2016-10-06 回复有任何疑惑可以回复我~

损失函数
2016-07-05

通过一个空白图片可以达到垂直居中的效果。

<!DOCTYPE HTML>
<html>
<head>
<meta  charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
.container{
    height:300px;
background:#ccc;
 
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
.abc{
    border:1px red solid;
    position:absolute;
    top:0;
    left:0;
    height: 100%;
    vertical-align: middle;
}
.abc * {
 margin: 0px;
 padding: 0px;
 vertical-align: middle;
}
/*辅助图片高度填满div，宽度为0，所以看不到这个图片*/
#img {
width: 0px;
height: 100%;
}
</style>
</head>
 
<body>
<div class="container">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
    </div>
</div>
<!--下面是代码任务区-->
<div class="abc">
<img alt="" src="" id="img">
    <img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</body>
</html>

望采纳！

2 回复有任何疑惑可以回复我~

收起回答

C0EEC3F7BBAA 提问者

虽然效果是实现了··但还是不明白为什么呢

2016-07-05 回复有任何疑惑可以回复我~

春雨里洗过的太阳93

回复 C0EEC3F7BBAA:道理和上两章讲的一样设了ul的display 还要设置ul下面的li

2016-09-21 回复有任何疑惑可以回复我~