如何水平垂直居中一个元素?

最新推荐文章于 2024-08-24 15:01:06 发布

BaekhyunDE

最新推荐文章于 2024-08-24 15:01:06 发布

阅读量117

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/BaekhyunDE/article/details/126771548

版权

本文介绍了如何使用弹性盒子（Flexbox）实现元素的居中对齐，并结合定位属性（position: absolute;）和transform属性，通过负值技巧来精确控制子元素的位置。通过实例展示了如何运用margin负值和transform: translate()来调整元素的top和left，使其在父容器中居中显示。

摘要由CSDN通过智能技术生成

1、弹性盒子

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

2、定位

(1) 定位+margin负值———top left设置50%，margin top left设置成子盒子的一半

(2) 定位 + transform负值———top left50%，transform: translate(-50%, -50%);

.box{
  position: relative;
}
.box .sub{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*margin-left: 负的宽度的一半*/
  /*margin-top: 负的高度的一半*/
}