css常用水平和垂直居中方法总结_display: inlin-block布局的两个span,如何垂直居中对齐-CSDN博客

本文链接：https://blog.csdn.net/CcA_Lin/article/details/105228532

本文总结了CSS中实现垂直居中、水平居中以及两者都居中的多种方法，包括内联元素和块元素的处理，如使用vertical-align、text-align、margin、display: flex、display: grid等技巧。此外，还提到了一些特殊情况的处理，如表格单元格的垂直居中。文章最后提供了参考链接，以便深入理解CSS居中方法。

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

垂直居中

内联（*）元素

单行
1. padding-top=padding-bottom
2. height=line-height
多行
1. padding-top=padding-bottom
  但当文本所在的元素是一个表单元格时（无论是html的table还是通过css使其表现为表格）不奏效，可用下面这个方法；
2. vertical-align:middle;
3. flexbox
4. “重影元素”技术,设置一个::before伪元素放置在容器内,height：100%; vertical-align:middle;。

块元素

知道元素高度(也可用于水平居中)：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

不知道元素高度（也可用于水平居中）：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

允许拉伸容器高度：将父元素设置为表格，子元素设置垂直居中

.parent {
  height: 300px;
  margin: 20px;
  padding: 20px;
  width: 300px;
  position: relative;
  display: table;
}
.child{
  background: black;
  color: white;
  padding: 20px;
  display: table-cell;
  vertical-align: middle;
}

使用flexbox

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

水平居中

内联（*）元素

块元素内的行内元素：text-align:center;适用于内联、内联表、内联flex、内联块等

块元素

除了在块垂直居中说的两个也可用于水平居中的方法外，还有:

margin: 0 auto;
多个块元素并行
1. inline-block
2. flexbox

.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}

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

水平、垂直都居中

除了上述方法组合外，还有：

flexbox

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

grid

body, html {
  height: 100%;
  display: grid;
}
span { 
  margin: auto;
}

总结

基本就是：text-align \ vertical-align \ margin: auto \ asolute + 负值margin \ absolute + translate \ flexbox \ grid ，注意它们使用的条件。
参考CSS-trick: Centering in CSS: A Complete Guide