子元素在父元素中水平、垂直居中总结
2019-06-18 本文已影响0人
裂开的汤圆
水平居中
无论是文本还是图片，水平居中都比较简单，直接在父元素中使用text-align:center的CSS就可以实现该效果，下面直接看代码
<html>
<head>
<style>
.father{
width: 300px;
height: 600px;
border:5px solid black;
text-align: center;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
水平居中
</div>
</div>
</body>
</html>
效果如下：
水平居中
基于flex布局实现垂直居中
代码如下：
<html>
<head>
<style>
.father{
width: 600px;
height: 300px;
border:5px solid black;
text-align: center;
/* 使用flex布局，Webkit 内核的浏览器，必须加上-webkit前缀 */
display: -webkit-flex;
display: flex;
/* 垂直居中 */
align-items: center;
}
.son{
/* 让子元素与父元素宽度相同才能实现水平居中 */
width: 100%;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
水平垂直居中
</div>
</div>
</body>
</html>
效果如下：
flex布局水平垂直居中.png
基于相对定位（position:relative）实现垂直居中
<html>
<head>
<style>
.father{
width: 600px;
height: 300px;
border:5px solid black;
text-align: center;
}
.son{
position:relative;
top: 50%;
/* 垂直向上偏移自身50%的高度 */
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="father">
<div class="son">
垂直水平居中
</div>
</div>
</body>
</html>
相对定位实现垂直居中.png
