当前位置: 代码迷 >> 综合 >> 关于居中对齐的方式总结
  详细解决方案

关于居中对齐的方式总结

热度:96   发布时间:2024-02-08 06:24:39.0

1.水平居中对齐:

  1. 对于行内元素可以使用text-align:center
  2. 对于块级元素使用margin:auto
  3. 使用绝对定位,left:50%+margin-left:-(子元素宽度的一半)
  4. 使用绝对定位+transform属性:left:50%+transform:translateX(-50%)
  5. 使用绝对定位+margin:auto:left:0+right:0+margin:auto

2.垂直居中居中对齐:

  1. line-height=height
  2. 使用绝对定位,top:50%+margin-top:-(子元素宽度的一半)
  3. 使用绝对定位+transform属性:top:50%+transform:translateY(-50%)
  4. 使用绝对定位+margin:auto:top:0+bottom:0+margin:auto
  相关解决方案