水平居中

行内元素

如果是行内元素进行水平居中的话，只需要给其父元素设置text-align: center即可实现。

  1. <div class="center">HelloWorld</div>
.center {
    text-align: center;
    width: 100vw;
}

demo1.png

块级元素

如果是块级元素，给该元素设置margin: 0 auto即可。

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

.center {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border: 1px solid #222;
}

如果你的块级元素没有设置宽度的话，可以使用display: table来实现。

.center {
  margin: 0 auto;
  display: table;
}

demo2.png

浮动元素

如果子元素包含float浮动属性，为了让子元素居中，则可以让父元素宽度设置为fit-content，并配合margin。

<div class="center">
  <div class="float"></div>
  <div class="float"></div>
</div>

.center {
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  margin: 0 auto;
}

.float {
  float: left;
  width: 100px;
  height: 100px;
  border: 1px solid #222;
}

demo3.png

fit-content：取以下两种值中的较大值

  • 固有的最小宽度
  • 固有首选宽度（max-content）和可用宽度（available）两者中的较小值

fit-content目前不兼容IE

flex布局

我们可以使用flex弹性布局，轻松实现水平居中，不管子元素是行内元素还是块级元素，只需要在父元素设置display: flex; justify-content: center;即可。

<div class="center">
  <div>HelloWorld</div>
</div>
<div class="center">
  <span>HelloWorld</span>
</div>
<div class="center">HelloWorld</div>

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

demo4.png

绝对定位

我们可以对元素进行绝对定位进行水平居中布局。同时我们可以分别配合transform、margin-left。

transform

<div class="center">HelloWorld</div>

.center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

demo5.png

margin-left

该方案适用于已知容器宽度，然后通过margin-left向左移动一半宽度实现。

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

:root {
  --box-width: 100px;
}
.center {
  position: absolute;
  left: 50%;
  margin-left: calc(-1 * var(--box-width) / 2);
  width: var(--box-width);
  height: 60px;
  border: 1px solid #222;
}

demo6.png

垂直居中

单行文本

如果元素是单行文本，我们只需要设置line-height为父元素高度即可。

<div class="page">
  <span class="center">HelloWorld</span>
</div>

.page {
  height: 300px;
  border: 1px solid #222;
}

.center {
  line-height: 300px;
}

demo7.png

行内块级元素

如果元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。

<div class="page">
  <span class="center"></span>
</div>

.page {
  height: 300px;
  border: 1px solid #222;
}

.center {
  display: inline-block;
  vertical-align: middle;
  width: 80px;
  height: 20px;
  background: #D66852;
}

.page::after, .center {
  display: inline-block;
  vertical-align: middle;
}

.page::after {
  content: '';
  height: 100%;
}

demo8.png

flex布局

我们可以使用flex弹性布局，轻松实现水平居中，不管子元素是行内元素还是块级元素，只需要在父元素设置display: flex; align-items: center;即可。

<div class="center">
  <div>HelloWorld</div>
</div>

.center {
  display: flex;
  align-items: center;
  height: 300px;
  border: 1px solid #222;
}

demo9.png

绝对定位

我们可以对元素进行绝对定位进行水平居中布局。同时我们可以分别配合transform、margin-top。

transform

<div class="center">HelloWorld</div>

.center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

demo10.png

margin-top

该方案适用于已知容器高度，然后通过margin-top向上移动一半高度实现。

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

:root {
  --box-height: 60px;
}
.center {
  position: absolute;
  top: 50%;
  margin-top: calc(-1 * var(--box-height) / 2);
  height: var(--box-height);
  width: 100px;
  border: 1px solid #222;
}

demo11.png