您的位置：首页 > Web前端

让div垂直居中的实现方法

2015-10-16 15:46 393 查看

有时不免碰到让div垂直居中的情况，而margin:0 auto；却只能实现div的左右居中，那么怎样实现上下左右居中呢？

代码如下：

为了清晰地看到效果，我就省去一部分不必要的代码
<style>
.ct{
width: 400px;/*宽度*/
height: 300px;
position: absolute;
left:50%;
top:50%;/*如果只是一个点的话现在这个div应该是正中央，但是他自己有高度和宽度*/
margin-left:-200px; /*宽度的一半，左右都有200px，实现了左右居中*/
margin-top:-150px;/*高度的一半，实现了上下居中*/
background:#abcdef;
}
</style>
<body>
<div class="ct"></div>
</body>

喏，结果就是这样的

随便调整窗口，都是在中间的咯。

如果是在一个div中居中，方法也是这样，不过记得给父级元素加上position: relative.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 代码前端

相关文章推荐

新的分享

章节导航