元素居中的方式总结大全

水平居中

父元素是块级元素，子元素是行内元素，给其父元素设置text-align:center

.father {
  width: 200px;
  height: 200px;
  background-color: antiquewhite;
  text-align: center;
}
.son {
  background-color: aqua;
}

<div class="father">
  <span class="son">son</span>
</div>

子元素是块级元素，该元素设置margin:0 auto。

.son {
  width: 100px;
  margin: 0 auto;
}

<div class="son">son</div>

父元素为 flex 布局，子元素设置margin:0 auto，添加上子元素的高度

.son {
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

使用 flex 布局，设置父元素的 justify-content: center

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

使用绝对定位和CSS3新增的属性 transform

.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

使用绝对定位和 margin-left（元素定宽）

.father {
  position: relative;
}
.son {
  width: 100px;
  position: absolute;
  left: 50%;
  margin-left: -50px;
}

子元素不定宽度时，设置 display 为 inline-block，父元素设置 text-align: center

.father {
  width: 200px;
  height: 200px;
  background-color: antiquewhite;
  text-align: center;
}
.son {
  background-color: aqua;
  display: inline-block;
}

<div class="father">
  <span class="son">son</span>
</div>

垂直居中

若元素是单行文本, 可设置line-height等于父元素高度

.son {
  line-height: 200px;
}

<span class="son">box-center</span>

若是块级元素，设置父元素为flex布局，子元素设置margin: auto 0即可（子元素不需要定宽）

.box {
  display: flex;
}
.box-center {
  margin: auto 0;
}

<div class="box-center">box-center</div>

多行的行内元素

.father {
  width: 200px;
  height: 200px;
  line-height: 200px;
  background-color: aquamarine;
}

.son {
  display: inline-block;
  line-height: 1em;
  vertical-align: middle;
}

<div class="father">
  <span class="son">
    这里是高度为150像素的标签内的多行文字，文字大小
  </span>
</div>

Flex 布局

.father {
  display: flex;
  align-items: center;
}

可用 transform，设置父元素相对定位

.box {
  position: relative;
}
.box-center {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

居中元素高度固定 ：position: absolute + margin

.box {
  position: relative;
}
.box-center {
  height: 100px;
  position: absolute;
  top: 50%;
  margin-top: -50px;
}

.box {
  position: relative;
}
.box-center {
  height: 100px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

水平垂直居中

前提：定宽高

.box {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  position: relative;
}

.children-box {
  width: 100px;
  height: 100px;
  background: yellow;
}

1. 绝对定位和负magin值

position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;

2. 绝对定位 + transform

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

3. 绝对定位 + left/right/bottom/top + margin

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

4. 父元素设置 flex 布局

display: flex;
justify-content: center;
align-items: center;

5. grid布局

display: grid;
//
margin: auto;

6. table-cell + vertical-align + inline-block/margin: auto

display: table-cell;
text-align: center;
vertical-align: middle;
//
margin: auto;

前提：不定宽高

1. 绝对定位 + transform

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

2. table-cell

display: table-cell;
text-align: center;
vertical-align: middle;
// 
display: inline-block;

3. flex布局

display: flex;
justify-content: center;
align-items: center;

4. flex布局

display: flex;
//
margin: auto;

5. grid + flex布局

display: grid;
//
align-self: center;
justify-self: center;

6. gird + margin布局

display: grid;
//
margin: auto;