盒子垂直水平居中

布织锁云

于 2023-03-22 09:31:14 发布

阅读量38

点赞数

文章标签： css 前端 html

本文链接：https://blog.youkuaiyun.com/qq_52731478/article/details/129702508

版权

文章总结了五种使子元素在父元素中垂直水平居中的CSS技巧：1)使用相对定位和自动margin；2)通过设置左右上下的百分比和负外边距；3)利用transform平移；4)应用flex布局的justify-content和align-items居中；5)在flex布局下，子元素margin自动居中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子元素垂直水平居中的5种方法的经验总结

1.父元素相对定位
  子元素绝对定位
      margin:  auto;
      上、右、下、左定位为0

2.父元素相对定位
  子元素绝对定位
      上、左50%
      上、左外边距为负的子元素宽度的一半
3.父相对定位
   子绝对定位
      上、左50%
      transform: translate( -50%,  -50%);
     
4.父元素display: flex;
        justify-content: center;
        align-items: center;
        
5.父元素display: flex;
   子元素margin:  auto;

总结得比较简陋，可以按照自身理解进行实战