CSS 居中方法总结

CSS 居中方法总结

---

行内元素

水平居中

• 文字居中，在父控件样式表添加

  text-align: center;

• 在父控件样式表添加

  width: fit-content;

  margin: auto;

垂直居中

• 单行文本：在父控件设置父控件高度与文本高度一致

  height: 200px;

  line-height: 200px;

---

块级元素

水平居中

• 在控件中添加左右自适应

  width: 100px;

  margin: 0 auto;

水平垂直居中

• 定位(已知宽高)

  • 给父元素添加相对定位：

    position: relative;

  • 给子元素设置position:

    position: absolute;

  • 用相对定位将子元素居中

    (子元素宽高为 100px、100px)

    • 方法一：

      left: 50%;

      top: 50%;

      margin-top: -50px;

      margin-left: -50px;

    • 方法二calc:

      left: calc(50%-50px);

      top: calc(50%-50px);

• 定位+transform（未知宽高）

  • 给父元素添加相对定位：

    position: relative;

  • 给子元素设置position:

    position: absolute;

  • 用相对定位将子元素居中

    left: 50%;

    top: 50%;

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

• 定位+margin

  • 给父元素添加相对定位：

    position: relative;

  • 给子元素设置position:

    position: absolute;

  • 用相对定位将子元素居中

    left: 0;

    top: 0;

    right: 0;

    bottom: 0;

    margin: auto;

• padding

  • 父元素不设置宽高

  • 子元素设置宽高

  （此时父元素的宽高即子元素的宽高）

  • 给父元素设置padding值，从而实现子元素的水平垂直居中

• flex布局

  • 在父控件中设置布局方式

    display: flex;

  • 父控件中设置水平居中

    align-items: center;

  • 父控件中设置垂直居中

    justify-content: center;

• 伪元素

  • 在父控件中添加行内元素水平居中属性：

    text-align: center;

  (由于子元素是块级元素，行内块元素居中属性失效)

  • 将块元素转换为行内块元素,实现水平居中

    display: inline-block;

  • 为父元素的伪元素添加宽高：（如：.parent::before {样式})

    content: “”;

    width: 20px;

    height: 200px;(与父元素等高)

  • 将::before 伪元素转换为行内块元素（::before默认为行内元素，设置宽高失效）

    display: inline-block;

  • 为子元素和::before 伪元素同时添加,实现垂直居中

    vertical-align: middle;

• calc(宽高相等)

  • 已知父元素宽高600px,600px;

  • 已知子元素宽高 100px,100px;

  • 用calc为子元素设置padding值

    padding: calc((100% - 100px) / 2);

  （此时子元素背景覆盖了父元素）

  • 让子元素背景只对content生效,不对padding生效

    background-clip: content-box;