前端深入探究（一）常用css水平垂直居中的6种方法

最新推荐文章于 2023-11-28 16:04:39 发布

李逸风

最新推荐文章于 2023-11-28 16:04:39 发布

阅读量495

点赞数

分类专栏：前端深入探究文章标签： css css3

本文链接：https://blog.csdn.net/sheng_li/article/details/107356913

版权

本文介绍了前端开发中常用的6种CSS水平垂直居中方法，包括vertical-align、line-height、定位加margin、定位加transform、flex布局以及模拟table。推荐使用transform和flex布局，它们能在未知元素宽高的情况下实现居中，而其他方法存在局限性。后续文章将继续深入探讨。

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

1：vertical-align: middle; // 需要同级dom也是行内元素，相对于同级元素居中

2：line-height: 50px; // 一般设置文字居中

3：定位加 margin实现居中

父元素设置 position:relative;

子元素设置 position:absolute; top 和 left 设置 50%; 高度固定，设置 margin-top 和 margin-left 元素宽度和高度的一半。

.main-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.main {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -250px;
  margin-left: -250px;
  width: 500px;
  height: 500px;
}

4：利用定位加 css transform偏移来实现居中

父元素设置position:relative;

子元素 position:absolute; top 和 left 设置 50%; 设置transform: translate(-50%, -50%);

3 和 4 的同与不同

相同点：

1：都是通过定位来协助实现的

不同点：

1：3的margin须依赖子元素的固定宽高来实现

2：3只能实现固定宽高元素的居中，4可以实现不同宽高的自适应居中

5：flex 实现居中