css 居中的四种方法

CSS 中居中是实现布局的常见需求，这篇文章将介绍以下四种方法：

方法一：使用 margin 属性

.center {
      margin: 0 auto;
}

这个方法适用于把元素水平居中。通过设置左右边距为“auto”，就可以使元素在其父容器中水平居中。

方法二：使用 flex 布局

.container {
      display: flex;
      justify-content: center;
      align-items: center;
}

这个方法通过设置容器为 flex 布局，然后使用 justify-content 和 align-items 属性将元素居中。这个方法可以水平和垂直居中元素。

方法三：使用绝对定位和 transform 属性

.center {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
}

这个方法通过使用绝对定位和 transform 属性使元素居中。通过设置元素的 left 和 top 值为 50%，再通过 translate 函数将元素向左/上移动自身宽/高的一半，就可以使元素水平和垂直居中。

方法四：使用 grid 布局

.container {
      display: grid;
      place-items: center;
}
    

这个方法通过设置容器为 grid 布局，并使用 place-items 属性将元素居中。这个方法可以水平和垂直居中元素。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！