您的位置：首页 > Web前端 > CSS

css中绝对定位的元素如何让其居中显示

2016-08-17 22:06 621 查看

对于前端工程师来说，页面布局是必备技能之一，我们经常有过这样的需求，就是让某个元素上下左右居中显示的业务。常规来说一般水平居中使用margin：0 auto就能够解决居中问题，但是当我们的元素居于父类是相对定位，自己是绝对定位的如何让其相对于父类垂直居中对齐呢？废话不多说了直接贴上代码.

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>上下作用居中实例代码</title>
<style>
.parent {
position: absolute;
width: 600px;
height: 600px;
background: #000000;
left: 50%;
top: 50%;
margin: -300px 0px 0px -300px;
}

.child {
color: #FFF;
width: 600px;
height: 600px;
border: 1px #FFF solid;
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
</head>

<body>
<div class="parent">
<div class="child"><p>当前元素</p></div>
</div>
</body>

</html>


如图所示

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  布局
相关文章推荐
新的分享
章节导航