水平居中

• 对于行内元素:

1. 给如果父级元素是块级元素，则直接给父级元素设置text-align: center;

2. 如果父级不是块级元素，则先将其父元素设置为块级元素，再给父元素设置 text-align: center;

• 对于确定宽度的块级元素：

1. width和margin实现。margin: 0 auto;

2. 首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%。设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%);
   • 对于宽度未知的块级元素

3. inline-block实现水平居中方法。该元素display：inline-block，它的父元素设置text-align:center实现水平居中。

4. 绝对定位+transform，translateX可以移动本身元素的50%。

display:absolute;left:50%;transform: translate(-50%)123

1. table标签配合margin左右auto实现水平居中。使用table标签（或直接将块级元素设值为display:table），再通过给该标签添加左右margin为auto。

2. flex布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

垂直居中

• 单行的行内元素

1. 利用line-height设置单行行内元素的"行高等于盒子的高"实现居中，这种方法适合纯文字类

• 对于多行的行内元素

1. 使用给父元素设置display:table-cell;和vertical-align: middle;属即可；

• 对于块级元素

1. 首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50%。 设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);（高度未知的情况下用transform，高度已知的情况下二者都可以用）

2. flex方案（高度定不定都可以），只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;

3. 弹性布局flex（高度定不定都可以）:父级设置display: flex; 子级设置margin为auto实现自适应居中（可分别实现水平和垂直的居中）

4. 已知高度和宽度的元素，设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;（水平垂直居中）

作者：cake_eat

链接：https://blog.csdn.net/cake_eat/article/details/111408894

来源：CSDN
著作权归作者所有，转载请联系作者获得授权，切勿私自转载。