导引:
方案一 { keyword: padding & margin }
方案二 { keyword: vertical-align }
方案三 { keyword: absolute | relative }
方案四 { keyword: flex }
方案五(文字垂直居中) { keyword: text-align | line-height }
方案一{ keyword: padding & margin }
提要简介: 运用 padding(父容器) + margin (子元素) + text-align:center;(父容器的子元素是内联元素时)
应用场景一:
- 父元素 和 子元素 都是 块级元素
- 父元素 宽度(可定也不不定), 高度不定.
<!-- html -->
<div class="parent">
<div class="son"></div>
</div>
/* css */
.parent {
background: #ddd;
width: 300px;
padding: 40px 0; /* 父容器用padding挤压子元素 实现子元素垂直居中 */
}
.son {
width: 50px;
height: 50px;
background: red;
margin: 0 auto; /* 块级子元素 水平居中 */
}
示图:
11111.png
应用场景二:
- 父元素是块级元素, 子元素为内联元素
- 父元素 宽度(可定可不定), 高度不定.
<!-- html -->
<div class="parent">
<span>x</span>
</div>
/* css */
.parent {
background: #ddd;
width: 300px;
text-align: center; // 使父容器内的 内联元素水平居中
padding: 40px 0; // 父元素不定高度值, 由padding把内联子元素挤到垂直居中
}
.parent span {
width: 50px;
height: 50px;
background: red;
}
示图:
22222.png
方案二 { keyword: vertical-align }
运用
vertical-align: middle;(垂直方向) 和 父容器设置text-align:center(水平方向)
应用场景一:
- 子元素 必须是 内联 或 内联块元素
- 水平居中交给 --> 父元素:
text-align:center; - 垂直居中交给 -->
vertical-align: middle;父元素 利用 伪类元素 作为参考 来 和 子元素 垂直居中对齐.
<!-- html -->
<div class="parent">
<div class="son"></div>
</div>
/* css */
.parent {
background: #ddd;
width: 300px;
height: 300px;
text-align: center; /* 让内联子元素水平居中对齐 */
vertical-align: middle; /* 对齐方式为 垂直居中 */
}
.parent .son {
display: inline-block;
width: 50px;
height: 50px;
background: red;
vertical-align: middle; /* 对齐方式为 垂直居中 */
}
.parent::after {
content: "";
display: inline-block;
height: 100%;
width: 1px;
background: green;
vertical-align: middle; /* 对齐方式为 垂直居中 */
}
示图
33333.png
方案三 { keyword: absolute | relative }
运用
position: relative | absolute ;和transform: translate: (-50%, -50%);的实现方案.
应用场景一: relative
- 子元素可以是 内联 或 块级元素
- 父元素 宽高固定
- 子元素调用css3样式: transform
<!-- html -->
<div class="parent">
<div class="son">x</div>
</div>
/* css */
.parent {
background: #ddd;
width: 300px;
height: 300px;
}
.son {
display: inline | inline-block | block; /* 子元素为 块级 和 内联 都可以 */
width: 50px;
height: 50px;
background: red;
position: relative; /* 相对定位,子元素默认位置是在左上角 */
top: 50%; /* 子元素顶线 对齐 父元素的水平中线 */
left: 50%; /* 子元素的左侧边线 对齐 父元素的垂直中线 */
transform: translate(-50% ,-50%); /* 子元素以 参考自身宽高 来计算 变形位移距离 */
}
示图:
44444.png
应用场景二: absolute
- 子元素可以是 内联 或 块级元素
- 父元素 宽高固定
- 子元素调用css3样式: transform
<!-- html -->
<div class="parent">
<div class="son">x</div>
</div>
/* css */
.parent {
background: #ddd;
width: 300px;
height: 300px;
position: relative; /* 父元素设置为 子元素的定位参考,必不可少 */
}
.son {
display: inline | inline-block | block; /* 子元素为 块级 和 内联 都可以 */
width: 50px;
height: 50px;
background: red;
position: absolute; /* 绝对定位,子元素默认位置是在左上角 */
top: 50%; /* 子元素顶线 对齐 父元素的水平中线 */
left: 50%; /* 子元素的左侧边线 对齐 父元素的垂直中线 */
transform: translate(-50% ,-50%); /* 子元素以 参考自身宽高 来计算 变形位移距离 */
}
示图:
55555.png
方案四 { keyword: flex }
提要: 运用 flex 布局, 主轴对齐调用 justify-content, 侧轴(交叉轴)对齐 align-items.
应用场景一:
- 父子元素 块级 内联都可以
- 水平居中: justify-content: center;
- 垂直居中: align-items: center;
<!-- html -->
<div class="box">
<div class="son"></div>
</div>
/* css */
.box {
width: 400px;
height: 400px;
background: #ddd;
border: 1px solid red;
display: flex; /* 元素设置为flex, 此元素的 display:felx */
justify-content: center; /* 水平居中设置 */
align-items: center; /* 垂直居中设置 */
}
.box .son {
width: 100px;
height: 100px;
background: blue;
}
图示:
3123123.jpg
方案五(文字垂直居中) { keyword: text-align | line-height }
提要: 文字居中 依据 父元素 text-align, 子元素里 line-height;
应用场景一:
- 父子元素 块级 内联都可以
- 水平居中: 父容器
text-align: center; - 垂直居中: 文字标签
line-height: (number= wrapper.height) px ;
<!-- html -->
<div class="box">
<p>xxxxx</p>
</div>
/* css */
* { /* 设置通类,必须 */
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {
border: 1px solid red;
width: 100px;
height: 100px;
background: #ddd;
text-align: center; /* 文字水平居中 */
}
.box p {
line-height: 100px; /* 文字垂直方向居中,参数等于父容器高度值 */
}
图示:
77777.png
