文章目录
- 1. 行内和块级元素自身相对父控件居中
- 1.1. 块级元素相对父控件居中
- 1.2. 行内元素相对于父控件居中
- 2. 实现单行文字垂直居中
- 3. 子绝父相实现子元素的水平垂直居中
- 3.1. 方案一
- 3.1.1. 示例
- 3.2. 方案二
- 3.2.1. 示例
- 3.3. 方案三(推荐)
- 3.3.1. 示例
- 3.4. 方案四(了解一下)
- 4. flex 实现水平垂直居中
- 4.1. 方法一
- 4.2. 方法二
- 4.2. 方法二
1. 行内和块级元素自身相对父控件居中
给行内和块级元素设置宽高，出现的现象：
- 设置宽高对行内元素没有效果
- 设置宽度对块级元素有效果
span {
width: 100px;
height: 100px;
text-align: center;
background-color: skyblue;
}
div {
width: 100px;
height: 100px;
background-color: pink;
}
原因是因为行内元素的宽高是由内容决定的。
1.1. 块级元素相对父控件居中
只能通过盒子模型的外边距实现，这个属性写在元素本身上面。
div {
width: 100px;
height: 100px;
background-color: pink;
margin: 0 auto;
}
如果是没有设置宽高的话，可以通过父控件的
text-align实现，但是不能用margin: 0 auto实现。
1.2. 行内元素相对于父控件居中
只能通过父控件的text-align实现。
body {
text-align: center;
}
span {
width: 100px;
height: 100px;
background-color: skyblue;
}
2. 实现单行文字垂直居中
对于单行文字：可以实现文字垂直居中(height 等于 line-height)。
div {
width: 300px;
height: 300px;
background-color: pink;
line-height: 300px;
}
<div>我是单行文字</div>
由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文字，不会太影响观感。
3. 子绝父相实现子元素的水平垂直居中
前提：定位的元素必须设置宽和高！！！
这里我们创建父元素和子元素，并设置样式。
.father {
width: 600px;
height: 600px;
background: pink;
}
.son {
width: 300px;
height: 300px;
background: #95a299;
}
3.1. 方案一
直接计算移动的需要距离。
left: 父子元素高度差的一半;
top: 父子元素宽度差的一半;
3.1.1. 示例
子元素 y 轴移动的距离是父子元素高度差的一半，
子元素 x 轴移动的距离是父子元素宽度差的一半。
.father {
width: 600px;
height: 600px;
background: pink;
position: relative;
}
.son {
width: 300px;
height: 300px;
background: #95a299;
position: absolute;
top: 150px;
left: 150px;
}
弊端：偏移值left和top是写死的，如果父元素的宽度发生改变，子元素就无法水平居中了。
3.2. 方案二
这里的left和top我们可以用百分比来表示，子元素相对父元素移动 50%的距离后，再根据子元素的外边距进行调整。
left: 50%;
top: 50%;
margin-left: 自身宽度的一半;
margin-top: 自身高度的一半;
3.2.1. 示例
.son {
width: 300px;
height: 300px;
background: #95a299;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px; /* 向左移动自身宽度的一半 */
margin-top: -150px; /* 向上移动自身宽度的一半 */
}
弊端：由于margin-left和margin-top值是写死的，如果 son 的宽度发生改变，子元素也无法水平居中。
3.3. 方案三(推荐)
子元素相对父元素移动 50%的距离后，使用transform调整子元素的位置。
3.3.1. 示例
width: 300px;
height: 300px;
background: #95a299;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
优势：不用计算调整子元素移动移动的距离，用百分比表示即可。
3.4. 方案四(了解一下)
子绝父相，子元素设置以下属性，也能进行水平垂直居中。
简单理解：四个方向有相同的力在拉这个盒子，margin:auto是让这个盒子的位置保持中立，来达到盒子处于正中心。
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
4. flex 实现水平垂直居中
4.1. 方法一
父元素开启 flex 布局，随后使用 justify-content 和 align-items 实现水平垂直居中。
display: flex;
/* 设置子元素水平居中 */
justify-content: center;
/* 设置子元素垂直居中 */
align-items: center;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>12-flex布局-实现子元素水平垂直居中</title>
<style>
.father {
background: pink;
height: 300px;
display: flex;
/* 设置子元素水平居中 */
justify-content: center;
/* 设置子元素垂直居中 */
align-items: center;
}
.son {
width: 100px;
height: 100px;
background: #a5ccaf;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
4.2. 方法二
父容器开启 flex 布局，随后子元素 margin: auto。
.father {
background: pink;
height: 300px;
display: flex;
}
.son {
width: 100px;
height: 100px;
background: #a5ccaf;
margin: auto;
}
4.2. 方法二
父容器开启 flex 布局，随后子元素 margin: auto。
.father {
background: pink;
height: 300px;
display: flex;
}
.son {
width: 100px;
height: 100px;
background: #a5ccaf;
margin: auto;
}
