div垂直⽔平居中的四种⽅法总结
5、利⽤弹性布局与 margin：
<style>
.container{
height: 600px;
width: 600px;
border:1px solid black;
display: flex;
}
.box{
width: 200px;
height: 100px;
background-color: blue;
margin: auto;
}
</style>
<div class="container">
<div class="box"></div>
</div>
1,⼦div先充满⽗元素，在margin:auto,
2，先相对于⽗元素margin平移，再回拉法,
3，利⽤表单单元格td特有属性,vertical-align，使⼦div垂直居中,
  再对⼦div设置⽔平居中.
4、弹性布局，通过定义伸缩容器的两个属性，justify-content主轴⽅向，align-items纵轴⽅向均为center  ——————（补充）
个⼈⽐较喜欢第⼀种和第四种⽅法，既简单,⼜不⽤计算
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.d-1{
width: 300px;
height: 300px;
position: relative;
margin: 0 auto;
border: 1px solid black;
}
.d-2{
width: 200px;
height: 200px;
border: 1px solid red;
position: absolute;
left:0;top: 0;right: 0;bottom: 0;
margin: auto;
}
.d-3{
width: 100px;
height: 100px;
border: 1px solid blue;
position: absolute;
left:50%;top: 50%;
margin-top: -50px;
margin-left: -50px;
}
.
d-4{
width: 100px;
height: 100px;
border: 1px solid blue;
/*让标签元素以表格单元格形式呈现，类似于td标签，主要是利⽤它的特殊属性：
元素垂直居中对齐，但其会被float、position:absolute、
所以尽量不要与其同⽤，设置了display：table-cell的元素对宽度⾼度敏感，
对margin值⽆反应，所以页⾯上出现在了左边，我就不想再在外⾯加调了哈，
但会响应padding属性，基本和td标签⽆异*/
display: table-cell;
vertical-align:middle;
}
.d-5{
width: 50px;
height: 50px;
background: blue;
margin:0 auto;
}
</style>
</head>
<body>
<div class="d-1">
<div class="d-2">
<div class="d-3">
</div>
</div>
</div>
<div class="d-4">
<div class="d-5"></div>
</div>html居中标签代码
</body>
</html>
运⾏结果:
4、弹性布局，通过定义伸缩容器的两个属性，justify-content主轴⽅向，align-items纵轴⽅向均为center
<style>
.container{
height: 600px;
width: 600px;
border:1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
.box{
width: 200px;
height: 100px;
background-color: blue;
}
</style>
<div class="container">
<div class="box"></div>
</div>
运⾏结果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。