一个div相对于外层的div水平和垂直居中
Posted zhenximeiyitian
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个div相对于外层的div水平和垂直居中相关的知识，希望对你有一定的参考价值。
我自己感觉，第四种比较常用
<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>
以上是关于一个div相对于外层的div水平和垂直居中的主要内容，如果未能解决你的问题，请参考以下文章