css水平垂直居中

发表于 | 分类于

水平居中Horizontally

inline或inline-*元素水平居中

你可以轻松的在一个 block 元素中水平居中一个 inline 元素，以下代码对 inline，inline-block，inline-table 和 inline-flex 等有效

1
2
3
4
5
6
7
8
9
10
11
12
13

.parent {
  text-align: center;
}
.child {
    inline;
    //inline-block;
    //inline-table;
    //inline-flex
}
<div class="parent">
    <div class="child"></div>
</div>

block元素水平居中

父元素为block,子元素也为bolck,且子元素设置了宽度(没宽度子元素就继承父元素宽度,居中没有意义).
无论正在居中块级元素的宽度或父级的宽度如何，都会起作用。

方法:子元素margin: 0 auto;左右外边距设置为自动填充

1
2
3
4
5
6
7
8
9
10
11
.parent {
    margin: 20px 0;
    padding: 10px;
}
.child {
    width: 200px;
    margin: 0 auto;
}
<div class="parent">
    <div class="child"></div>
</div>

多个block元素水平居中

多个block元素一行排列水平居中

  • 方法一：利用inline-block,原理是将子元素转化为inline-block.再用text-align: center;
  • 方法二：利用display: flex.注意:子元素高度会保持一致.看下方例子.
    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
    //方法一
    .parent {
      text-align: center;
    }
    .child {
      display: inline-block;
    }

    //方法二
    .flex-center {
      display: flex;
      justify-content: center;
    }


    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>

    方法二
    <div class="flex-center">
        <div class="child"></div>
    </div>

多个block元素每行一个水平居中

因为每个block元素独占一行,所以方法仍然是margin: 0 auto;

1
2
3
4
5
6
7
8
.child {
  margin: 0 auto;
}
<div class="flex-center">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

垂直居中Vertically

inline 或 inline-* 元素单行垂直居中

需要垂直居中的元素为单行的inline 或 inline-* 元素,例如一个text或者a链接(包括a链接变化而成的按钮)

方法一：上下使用相同的padding(推荐)

上下和左右使用相同的padding可以不用设置宽高,既可以在修改文本内容是自适应,又可以减少出现BUG的几率.

1
2
3
4
5
6
7
8
9
.child {
  padding-top: 30px;
  padding-bottom: 30px;
}
<div class="parent">
    <div class="child">垂直居中垂直居中</div>
    <div class="child">垂直居中垂直居中</div>
    <div class="child">垂直居中垂直居中</div>
</div>

方法二：设置line-height与高度相同

1
2
3
4
5
6
7
8
9
10

.child {
  height: 100px;
  line-height: 100px;
}
<div class="parent">
    <div class="child">垂直居中垂直居中</div>
    <div class="child">垂直居中垂直居中</div>
    <div class="child">垂直居中垂直居中</div>
</div>

多行文本垂直居中

多行文本使用增加上下padding垂直居中的方法仍然有效且良好,不需设置宽高,推荐使用.
如果这样做不起作用，那么文本所在的元素可能是table或者table-cell元素，无论是真正的table还是后期自己添加的CSS.
下面说说这两种情况使用其他方法的垂直居中.

方法一: display: table;和vertical-align: middle;

1
2
3
4
5
6
7
8
9
10
11
12
.parent {
    display: table;
    width: 200px;
    height: 400px;
}
.child {
    display: table-cell;
    vertical-align: middle;
}
<div class="parent">
    <div class="child">多行垂直居中垂直居中垂直居中垂直居中</div>
</div>

方法二：使用flex布局多行文本居中

你可以尝试使用 flexbox,一个单独的 flexbox 子元素可以轻易的在其父元素中居中。谨记，这种方法需要父元素有固定的高度。

1
2
3
4
5
6
7
8
9
10
.parent {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

<div class="parent">
    <div class="child">多行垂直居中垂直居中垂直居中垂直居中</div>
</div>

block元素垂直居中

已知元素高度

原理是绝对定位,top: 50%;然后 margin-top设置为负边距且值为他本身高度的一半.

1
2
3
4
5
6
7
8
9
10
11
12
13
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; 
}

<div class="parent">
    <div class="child">块垂直居中垂直居中垂直居中垂直居中</div>
</div>

未知元素高度

1
2
3
4
5
6
7
8
9
10
11
12
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

<div class="parent">
    <div class="child">块垂直居中垂直居中垂直居中垂直居中</div>
</div>

使用flex布局block元素高度未知垂直居中

1
2
3
4
5
6
7
8
9
.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<div class="parent">
    <div class="child">块垂直居中垂直居中垂直居中垂直居中</div>
</div>

水平垂直居中

有固定宽高的元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;
}

<div class="parent">
    <div class="child">块水平垂直居中水平垂直居中水平垂直居中水平垂直居中水平垂直居中</div>
</div>

宽高不固定

1
2
3
4
5
6
7
8
9
10
11
12
13
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="parent">
    <div class="child">块水平垂直居中水平垂直居中水平垂直居中水平垂直居中水平垂直居中</div>
</div>

使用flex布局垂直水平居中

1
2
3
4
5
6
7
8
9
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="parent">
    <div class="child">块水平垂直居中水平垂直居中水平垂直居中水平垂直居中水平垂直居中</div>
</div>

使用grid布局垂直水平居中

1
2
3
4
5
6
7
body, html {
  height: 100%;
  display: grid;
}
span { 
  margin: auto;
}
Buy me a cup of coffee,thanks!