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

这里的垂直居中到底是相对于DIV还是浏览器页面

很矛盾。例子和大家做任务都是相对DIV，可是题目说相对于浏览器。

Summer1987

2016-06-16

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

关注问题我要回答

777

操作

收起

4 回答

Sir晓明
2016-07-21

<!DOCTYPE HTML>

<html>

<head>

<title>父元素高度确定的多行文本</title>

<style>

body{text-align:center;}

.wrap{height:300px;background:#ccc }

.div img{position: fixed;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%,-50%);

-moz-transform: translate(-50%,-50%);

-ms-transform: translate(-50%,-50%);

-o-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);

}

</style>

</head>

<body>

<div>

<p>看我是否可以居中。</p>

</div>

</td></tr></tbody></table>

<div>

</div>

</body>

</html>

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

收起回答

Sir晓明
2016-07-21

<!DOCTYPE HTML>

<html>

<head>

<title>父元素高度确定的多行文本</title>

<style>

.wrap{height:300px;background:#ccc }

img{

position: absolute;

top: 0; right: 0; bottom: 0; left: 0;

margin: auto;

}

</style>

</head>

<body>

<div>

<p>看我是否可以居中。</p>

</div>

</td></tr></tbody></table>

<div>

</div>

</body>

</html>

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

收起回答

黑色旋风
2016-06-20

<table style="position:absolute; left:0; top:0; height:100%;"><tbody><tr><td>

把div包起来就行了。当然闭合标签就不写了。

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

收起回答

寸寸君

为何必须脱离文档流，而设置成float就不行呢

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

黑色旋风回复寸寸君

float不也是脱离文档流？不脱离文档流怎么相对浏览器居中啊，除非你整个页面就这么一个元素，页面高度也是浏览器窗口高度。至于float...它虽然脱离了文档流但仍占据位置空间，还会被周围的元素影响，你设置水平居中完全没问题，但是垂直居中的话，你设置top不会变（position没变）设置margin-top则相对于上面的元素移动

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

左曦铭回复黑色旋风

float脱离了文档流后还会占据位置？？不是吧

2018-05-29 回复有任何疑惑可以回复我~