image.png
<div class="parent">
<div class="child">这是垂直居中的元素</div>
</div>
居中元素宽高已知
1. absolute + margin auto
.parent{
position: relative;
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
}
.child{
background: tomato;
width: 50vw; height: 50vh;
/* 核心代码 */
position:absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
}
2. absolute + 负 margin
.parent{
position:relative;
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
}
.child{
background: tomato;
width: 100px; height: 100px;
/* 核心代码 */
position:absolute;
top: 50%; left: 50%;
margin-top: -50px;
margin-left: -50px;
}
3. absolute + calc
.parent{
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
/* 核心代码 */
position:relative;
}
.child{
background: tomato;
width: 200px; height: 200px;
/* 核心代码 */
position:absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
}
居中元素宽高未知
4. absolute + transform
transform
的 translate
属性值如果是一个百分比,那么这个百分比将是基于自身的宽高计算出来的。
.parent{
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
/* 核心代码 */
position:relative;
}
.child{
background: tomato;
/* 核心代码 */
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
5. line-height + vertical-align
把当前元素设置为行内元素,然后通过设置父元素的text-align: center
; 实现水平居中;
同时通过设置当前元素的 vertical-align: middle
; 来实现垂直居中;
最后设置当前元素的 line-height: initial
; 来继承父元素的line-height
。
.parent{
width: 90vw;
border: 3px solid steelblue;
/* 核心代码 */
line-height: 500px;
text-align: center;
}
.child{
background: tomato;
/* 核心代码 */
display: inline-block;
vertical-align: middle;
line-height: initial;
}
6. table 表格元素
通过最经典的 table 元素来进行水平垂直居中,不过代码看起来会很冗余,不推荐使用;
<table>
<tbody>
<tr>
<td class="parent">
<div class="child"></div>
</td>
</tr>
</tbody>
</table>
<style>
.parent {
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
/* 核心代码 */
text-align: center;
}
.child {
background: tomato;
/* 核心代码 */
display: inline-block;
}
</style>
7. css-table 表格样式
.parent{
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
/* 核心代码 */
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child{
background: tomato;
/* 核心代码 */
display: inline-block;
}
8. flex 布局(一)
justify-content
表示:设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式;
align-items
表示:定义 flex 子项在 flex 容器的当前行的侧轴(纵轴)方向上的对齐方式。
.parent {
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
/* 核心代码 */
display: flex;
justify-content: center;
align-items: center;
}
.child{
background: tomato;
}
9. flex + margin auto(二)
.parent{
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
/* 核心代码 */
display: flex;
}
.child{
background: tomato;
/* 核心代码 */
margin: auto;
}
image.png附赠 flex 兼容性图片一张
10. grid 网格布局 (一)
grid
布局相信大家在实际项目中用的较少,主要是该布局实在是太超前,导致了兼容性不是那么理想,但是不可否认的是 grid
的能力在 css 布局中绝对是一个质的飞越。
.parent{
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
/* 核心代码 */
display: grid;
align-items: center;
justify-content: center;
}
.child{
background: tomato;
}
11. grid 网格布局 (二)
.parent{
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
/* 核心代码 */
display: grid
}
.child{
background: tomato;
/* 核心代码 */
align-self: center;
justify-self: center;
}
image.png附赠 grid 兼容性图片一张
- 如果你的项目 在PC 端有兼容性要求并且宽高固定,推荐使用
absolute + 负 margin
方法实现; - 如果你的项目 在 PC 端有兼容性要求并且 宽高不固定,推荐使用
css-table
方式实现; - 如果你的项目 在 PC 端无兼容性要求 ,推荐使用
flex
实现居中,当然不考虑 IE 的话,grid
也是个不错的选择; - 如果你的项目在 移动端使用 ,那么推荐你使用
flex
,grid
也可作为备选。
还有一些比较冷门的方式方法,例如 伪类元素、grid-container 的 grid-template-rows 等......
网友评论