前端深入探究（一）常用css水平垂直居中的6种方法-优快云博客

本文链接：https://blog.youkuaiyun.com/sheng_li/article/details/107356913

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

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

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 实现居中

父元素设置 display: flex; align-items: center; justify-content:center;

flex相关知识：

align-items // 垂直对齐方式

stretch // 默认

flex-start // 上对齐

center // 垂直居中对齐

flex-end // 下对齐

baseline // 基线对齐

justify-content // 水平对齐方式

flex-start // 左对齐

center // 水平居中对齐

flex-end // 右对齐

space-between // 两端对齐

space-around // 两端间距对齐

.main-warp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

6：模拟 table 实现居中

父元素设置 display: table;

子元素设置 display: table-cell; vertical-align: middle; text-align: center;

.main-warp {
  display: table;
  width: 100%;
  height: 100%;
}
.main {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

基本上常用的就这6种，平时使用建议用4、6这两种方法来实现dom元素的水平垂直居中。其他方法都有着自己的缺陷，这两种的优势很明显可以实现在不知道dom元素宽高的情况下实现居中。至于最后这种为什么不推荐，table元素限制太大了，设置一些文字类的还可以，但是大的dom去使用，在样式方面就显得力不从心了。

好了，这是第一篇，后续还会接着更新。