CSS实现水平和垂直居中的方法，你会吗？

3 min read

CSS水平居中的方法：

  1. 使用text-align:center;属性将单行文本水平居中。
  2. 使用margin:auto;属性将块级元素水平居中。
  3. 使用display:flex;和justify-content:center;属性将任何元素水平居中。
  4. 使用position:absolute;和left:50%;margin-left:-[元素宽度的一半];将绝对定位元素水平居中。

CSS垂直居中的方法：

  1. 使用line-height属性将单行文本垂直居中。
  2. 使用display:flex;和align-items:center;属性将任何元素垂直居中。
  3. 使用position:absolute;和top:50%;margin-top:-[元素高度的一半];将绝对定位元素垂直居中。
  4. 使用position:relative;和top:50%;transform:translateY(-50%);将相对定位元素垂直居中。