如何实现元素水平垂直居中(元素垂直居中的几种方法)

导语：详解实现元素的水平垂直居中的n种方式

1. flex

在父元素设置如下属性：

display: flex;

justify-content: center;

align-items: center;

2. grid

在父元素设置如下属性：

display: grid;

justify-content: center;

align-items: center;

3. table-cell

在父元素设置如下属性：

display: table-cell;

vertical-align: middle;

在子元素设置如下属性：

width: 100px;

margin: 0 auto;

4. position 偏移剩余宽高的一半;

在父元素设置如下属性：

position: relative;

在子元素设置如下属性：

position: absolute;

top: 200px;

left: 200px;

5. position + margin: auto;

在父元素设置如下属性：

position: relative;

在子元素设置如下属性：

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

6. position + margin:负值;

在父元素设置如下属性：

position: relative;

在子元素设置如下属性：

position: absolute;

top: 50%;

left: 50%;

margin-top: -50px;

margin-left: -50px;

7. position + translate;

在父元素设置如下属性：

position: relative;

在子元素设置如下属性：

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

本文内容由小心整理编辑！