您的位置：首页 > 其它

一个div相对于外层的div水平和垂直居中

2016-10-06 10:45 190 查看

我自己感觉，第四种比较常用

<title>无标题文档</title>
<style>
.parent {
width:800px;
height:500px;
border:2px solid #000;
position:relative;
}
.child {
width:200px;
height:200px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-color: red;
}

.parent1 {
width:800px;
height:500px;
border:2px solid #000;
display:table-cell;
vertical-align:middle;
text-align: center;
}
.child1{
width:200px;
height:200px;
display:inline-block;
background-color: red;
}

.parent2{
width:800px;
height:500px;
border:2px solid #000;
display:flex;
justify-content:center;
align-items:center;
}
.child2{
width:200px;
height:200px;
background-color: red;
}

.parent3 {
width:800px;
height:500px;
border:2px solid #000;
position:relative;
}
.child3 {
width:300px;
height:200px;
margin:auto;
position:absolute;/*设定水平和垂直偏移父元素的50%，
再根据实际长度将子元素上左挪回一半大小*/
left:50%;
top:50%;
margin-left: -150px;
margin-top:-100px;
background-color: red;
}

</style>

</head>

<body>
<div class="parent">
<div class="child">第一种方法</div>
</div>

<div class="parent1">
<div class="child1">第二种方法</div>
</div>

<div class="parent2">
<div class="child2">第三种方法</div>
</div>

<div class="parent3">
<div class="child3">第四种方法</div>
</div>

</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航