【HTML中垂直居中】【容器】使用绝对定位
2018-11-02 本文已影响5人
fanlehai
【方法一】
- top 设置为:50％;
- margin-top 设置为: -(content高度/2);
- 设置content高度
<html>
<head>
<style type="text/css">
.content {
background-color: rgb(87, 87, 92);
position: absolute;
top: 50%;
height: 240px;
margin-top: -120px;
/* negative half of the height */
}
</style>
</head>
<body>
<div class="content">Content goes here</div>
</body>
</html>
-
优点：
适用于所有浏览器不需要嵌套标签; -
缺点：
没有足够空间时，content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况)
【方法二】
- 适用有固定高度和宽度的div；
- position:absolute;
- top,bottom,left,right都是为0；
- margin:auto;
<html>
<head>
<style type="text/css">
#content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 240px;
width: 70%;
background-color: rgb(87, 87, 92);
}
</style>
</head>
<body>
<div id="content"> Content here</div>
</body>
</html>
-
优点：
简单 -
缺点：
IE(IE8 beta)中无效
无足够空间时，content 被截断，但是不会有滚动条出现
