CSS 居中方法大全📖

引言💭

在写项目的时候总是遇到样式居中的问题，为了省去查阅时间，特作此篇。

这篇文章列举了最常见的几种居中方法，在样式调节的时候绝对能用上。

一、文本居中

1.1 水平居中文本

通过 text-align: center 来实现文本在其父元素中的水平居中。

arduino 复制代码

.text-center {
  text-align: center;
}

1.2 垂直居中单行文本（已知高度）

通过设置容器的 line-height 为其高度，实现垂直居中。

css 复制代码

.container {
  height: 100px;
  line-height: 100px; /* 与高度相同 */
}

二、块级元素居中

2.1 水平居中块级元素

通过设置 margin: auto 来水平居中已知宽度的块级元素。

css 复制代码

.block-center {
  margin-left: auto;
  margin-right: auto;
  width: 80%; /* 需要指定宽度 */
}

2.2 水平垂直居中块级元素（传统方法）

使用 position: absolute 和 transform 实现水平垂直居中。

css 复制代码

.container {
  position: relative;
  height: 300px;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
}

三、Flexbox 居中（现代推荐方法）

3.1 水平垂直居中

使用 Flexbox 的 justify-content 和 align-items 实现居中对齐。

css 复制代码

.flex-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;    /* 垂直居中 */
  height: 100vh;         /* 需要设置高度 */
}

3.2 仅水平居中

通过 justify-content: center 实现水平居中。

css 复制代码

.flex-horizontal {
  display: flex;
  justify-content: center;
}

3.3 仅垂直居中

通过 align-items: center 实现垂直居中。

css 复制代码

.flex-vertical {
  display: flex;
  align-items: center;
  height: 100vh; /* 需要设置高度 */
}

四、Grid 居中

4.1 水平垂直居中

使用 place-items: center 来同时实现水平和垂直居中。

css 复制代码

.grid-container {
  display: grid;
  place-items: center; /* 简写属性 */
  height: 100vh;
}

4.2 单独控制水平和垂直居中

分别使用 justify-content 和 align-content 控制水平和垂直居中。

css 复制代码

.grid-container {
  display: grid;
  justify-content: center; /* 水平居中 */
  align-content: center;   /* 垂直居中 */
  height: 100vh;
}

五、行内/行内块元素居中

5.1 水平居中

使用 text-align 来水平居中行内或行内块元素。

arduino 复制代码

.parent {
  text-align: center;
}

.inline-child {
  display: inline-block;
}

5.2 垂直居中

通过设置父元素的 line-height 和子元素的 vertical-align: middle 实现垂直居中。

css 复制代码

.parent {
  line-height: 100px; /* 与父元素高度相同 */
}

.inline-child {
  vertical-align: middle;
}

六、绝对定位居中

使用 position: absolute 和 margin: auto 将元素在父容器内居中。

css 复制代码

.parent {
  position: relative;
  height: 300px;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 200px;
  height: 100px;
}

七、视口居中（相对于浏览器窗口）

使用 position: fixed 和 transform 来实现相对于视口的居中。

css 复制代码

.viewport-center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

八、结语

这就是最常见的几种方法了，如果还是不能够实现居中，还请麻烦自行查阅文档。希望这篇文章可以帮助到你。🫰🏻