水平居中

如何居中一个元素（终结版）

inline 元素

  • text-align: center
  • block 中是 block ，可以让里面的 block 为 inline-block

block 元素

  • margin: {any} auto ，不要求 margin top、bottom，只需 left right 为 auto
  • display: table + margin: {any} auto
    • table 类似 block ，只是宽度为内容宽
  • 父 relative 子 absolute + transform（2D/3D 转换）
    • 子向右移动父宽度的一半，再向左移动自身宽度的一半
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .child {
    position: absolute;
    /* 子向右移动父宽度的一半 */
    left: 50%;
    /* 再向左移动自身宽度的一半 */
    transform: translateX(-50%);
  }

  .parent {
    position: relative;
  }
</style>
  • flex + justify-content: center
  • flex + margin auto

行内多个 block 元素

  • flex + justify-content: center
  • 全设为 inline-block，父级 text-align: center

float 元素

定宽 float

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
  .self {
    position: relative;
    /* 向右移动父级宽度的一半 */
    left: 50%;
    /* 向左移动自身宽度的一半 */
    margin-left: -250px;
  }
</style>

<div class="parent">
  <span class="self" style="float:left;width:500px;">我是要居中的浮动元素</span>
</div>

不定宽 float

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div class="real-father">
  <div class="fake-father">
    <p class="son">float 水平居中</p>
  </div>
</div>

<style>
  .real-father {
    background-color: aquamarine;
    width: 300px;
    height: 300px;
  }
  /* .fake 这一层是披上的，没有内容的，在外一层才是原先的父元素*/
  .fake-father {
    /* 加上 float 可消除 son 的 float。是因为都脱离了文档流？ */
    float: left;
    position: relative;
    left: 50%;
  }

  .son {
    float: left;
    /* 
    fake-father 其实跟 son 是等宽等高的，
    这里移动 fake-father 宽度的一半就是移动 son 自身宽度的一半 
    */
    position: relative;
    right: 50%;
  }
</style>

通用办法 flex

justify-content: center

absolute 元素

margin auto 加上 left/right: 0 （还不能省略，很奇特，我被坑过一次）

1
2
3
4
5
6
<div class="parent">
  <div class="child">让绝对定位的元素水平居中对齐。</div>
</div>
.parent{ position:relative; } .child{ position: absolute; /*绝对定位*/ width:
200px; height:100px; background: yellow; margin: 0 auto; /*水平居中*/ left: 0;
/*此处不能省略，且为0*/ right: 0;/*此处不能省略，且为0*/ }

垂直居中

inline 元素 (单行)

inline-height 等于 height

inline 元素 (多行)

  • flex 主轴垂直后 justify-content: center
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="parent">
  <p>
    Dance like nobody is watching, code like everybody is. Dance like nobody is
    watching, code like everybody is. Dance like nobody is watching, code like
    everybody is.
  </p>
</div>
<style>
  .parent {
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 2px dashed #f69c55;
  }
</style>
  • 父 table 子 table-cell，子 vertical-align: middle
    • vertical-align 用于**_ inline 元素和 table-cell 元素_** 的垂直居中

block 元素

定高 block

absolute + 负 margin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="parent">
  <div class="child">固定高度的块级元素垂直居中。</div>
</div>
<style>
  .parent {
    position: relative;
  }

  .child {
    position: absolute;
    top: 50%;
    height: 100px;
    /*  margin 负自身一半高度 */
    margin-top: -50px;
  }
</style>

不定高 block

absolute + transform

通用

  • flex + align-items
1
2
3
4
5
6
7
8
9
<div class="parent">
  <div class="child">未知高度的块级元素垂直居中。</div>
</div>
<style>
  .parent {
    display: flex;
    align-items: center;
  }
</style>
  • 将父级设为 table-cell 后用 vertical-align

水平垂直居中

已知高宽

  • absolute + 负 margin

已知高

  • absolute + margin: auto
1
2
3
4
5
6
7
8
9
10
11
12
#container {
  position: relative;
  height: 100px; /* 必须有个高度 */
}
#center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
  • flex/grid + margin: auto
1
2
3
4
5
6
7
8
#container {
  height: 100vh; /* 必须有个高度 */
  display: grid;
  /* display: flex; */
}
#center {
  margin: auto;
}
  • flex 的 justify-content 和 align-items

未知高宽

absolute  + transform

1
2
3
4
5
6
7
8
9
10
#container {
  position: relative;
}

#center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}