css 居中的几种实现方式

CSS居中是网页设计中常见的需求之一，下面介绍几种实现方式。

水平居中

方式一：设置父元素为flex布局，使用justify-content:center属性实现水平居中。

父元素{
      display:flex;
      justify-content:center;
}
子元素{
  /*其他样式*/}

方式二：使用text-align:center属性实现文字水平居中，应用于父元素或应用于需要居中的子元素。

父元素{
      /*其他样式*/  text-align:center;
}
或子元素{
      /*其他样式*/  text-align:center;
}

垂直居中

方式一：使用absolute+transform属性实现子元素垂直居中（需知道高度）。

父元素{
      position:relative;
}
子元素{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
  /*其他样式*/}

方式二：使用flex布局实现子元素垂直居中。

父元素{
      display:flex;
      align-items:center;
}
子元素{
  /*其他样式*/}
    

以上是常用的几种实现方式，根据具体场景使用相应的方式即可。如有疑问，欢迎留言交流。

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