使元素水平垂直居中的几种方式
1.居中元素有具体宽高的情况
通过绝对定位用居中元素的外边距使自己居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father {
position: relative;
width: 400px;
height: 400px;
border: 1px solid skyblue;
}
/* 前提:知道父子元素的具体宽高 */
/* 1.通过子绝父相的定位结构 */
/* 2.通过居中元素的外边距使自己居中 */
.son {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
margin-left: 50px;
margin-top: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
2.居中元素不知道具体宽高的情况
方法一:通过绝对定位用2D平移居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father {
position: relative;
width: 400px;
height: 400px;
border: 1px solid skyblue;
}
/* 1.通过子绝父相的定位结构 */
/* 2.通过2D平移使自己居中 */
/* 优点:可以不用知道居中元素的具体宽高 */
/* 注意:
top:50%;left:50% 这里的百分比为父元素的百分比
translateX(-50%) translateY(-50%) 这里的百分比为自身的百分比,
表示X轴Y轴反方向移动自身的一半距离即(回掉自身的一半),
因为上面的 top:50%;left:50%移多了自身的一半 */
.son {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
transform: translateX(-50%) translateY(-50%);
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
方法二:使用flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father {
display: flex;
width: 400px;
height: 400px;
justify-content: center;
align-items: center;
border: 1px solid skyblue;
}
/* 使用flex弹性布局 */
/* 1.给需要居中的父元素添加flex布局/
/* 2.通过X轴Y轴方向的内容居中显示 */
/* 优点:可以不用知道居中元素的具体宽高,代码简洁 */
/* 注意:
justify-content:主轴(X轴)方向的内容居中显示
align-items:侧轴(Y轴)方向的内容居中显示 */
.son {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>