用 css 元素实现元素垂直居中

发表于 | 分类于

  1. 水平居中的方式

  2. 垂直居中的方式

水平居中

1.水平居中: 行内元素解决方案

只需要将行内元素包裹在一个属性为block的父级元素中，并把这个父级元素添加如下属性即可:

1
text-align:center;

试用元素:
文字、链接、其它inline或者inline-*类型的元素(如 inline-block,inline-table,inline-flex)
实例:

1
2
3
4
5
6
7
8
9
10
11
12
13
/*CSS代码片段*/
nav, div{
  text-align: center;
}
/*Html代码片段*/
<div>文字元素</div>
<nav>
  <a href="">链接元素01</a>
  <a href="">链接元素02</a>
  <a href="">链接元素03</a>
</nav>

2.水平居中: 块级元素解决方案

对于块级元素( display:block )来说，我们需要将它的外边距(即 margin-left和margin-right )设置为auto，即可实现块级元素的居中。

1
2
3
4
.center{
  /* 这里可以设置顶端外边距 */
  margin: 10px auto;
}

实例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*CSS 代码片段*/
/*
解决方案：
添加margin-left，margin-right属性值为auto即可，如下：
margin: 0 auto;
注意：需要居中的块元素需要有固定的宽度，否则无法实现居中，因为占据100%宽度
*/
div,p {
  width: 200px; /* 这里需要设置元素宽度 */
  height: 150px;
  background: #222;
  color: #FFF;
}
/* 定义居中关键属性 */
.center{
  /* 这里可以设置顶端外边距 */
  margin: 10px auto;
}

1
2
3
4
5
6
7
8
9
10
<!--HTML 代码片段-->
<!--
居中元素：块状元素，如(div, p, section 等等元素），即display属性为block的元素
-->
<div class="center">
    水平居中的块级元素
</div>
<p class="center"> 水平居中的块级元素 </p>
<!--现在可以看到居中效果的块状元素了 -->

3.水平居中: 多个块状元素解决方案

如果页面里有多个块状元素需要水平排列居中，可以将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center即可实现。

实例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*
解决方案：
设置这几个块状的元素display属性为inline-block，并且设置父元素text-align属性为center即可
*/
.center{
  display:inline-block;
}
body{
  text-align:center;
}
/* 元素美化 */
div{
  width: 100px;
  background: #222;
  height: 50px;
  color: #FFF;
  padding: 10px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--HTMl 代码片段-->
<!--
居中类型：水平居中
居中元素：“多个”块状元素水平横向排列居中
-->
<div class="center">水平居中的块状元素</div>
<div class="center">水平居中的块状元素</div>
<!--
现在可以看到以上两个块状元素水平横向排列并且居中
提示：如果需要将以上两个元素垂直排列居中的话，使用上一节的margin: 0 auto;即可实现
-->

4.水平居中:多个块级元素解决方案(使用flexbox布局实现)

使用flexbox布局，只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可

实例:

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
/*css代码片段*/
/*
解决方案：
设置需要水平居中的块状元素的父元素display为flex ，并且justify-content属性为center即可
*/
body{
  display: flex;
  justify-content: center;
}
/* 页面美化元素 */
div{
  width: 100px;
  background: #222;
  height: 50px;
  color: #FFF;
  padding: 10px;
  margin: 10px;
}
1
2
3
4
5
6
7
8
9
10
<!--html 代码片段-->
<!--
居中类型：水平居中
居中元素：“多个”块状元素水平横向排列居中 (使用flexbox布局实现)
-->
<div>水平居中的块状元素</div>
<div>水平居中的块状元素</div>

垂直居中

1.垂直居中:单行的行内元素解决方案

当一个行内元素，即inline,inline-*类型的元素需要居中的话，可以将它的line-height设置为父元素的高度，即可实现垂直居中的效果。

实例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*
解决方案：将inline元素的line-height设为一致即可
*/
#container{
  background: #222;
  height: 200px;
  text-align: center;
}
/*  以下代码中，将a元素line-height设置的和父元素一样高度即可实现垂直居中 */
a{
  line-height:200px;  
  color: #FFF;
}

1
2
3
4
5
6
7
8
9
10
<!--
居中类型：垂直居中
居中元素：单行的inline类型元素，文字或者链接等
-->
<div id="container">
    <a href="#">hello, xiaolili</a>
</div>

2.垂直居中:多行的行内元素解决方案( Inline-Block )

组合使用display:table-cell和vertical-align:middle属性和和一个伪元素让内容块处于容器中央来定义需要居中的元素的父容器元素生成效果.

1
2
3
4
5
<div class="Center-Container is-Inline">  
  <div class="Center-Block">  
    <!-- CONTENT -->  
  </div>  
</div>

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
31
32
33
34
/*
添加了一些小技巧:
如果内容块宽度大于容器宽度，比如放了一个很长的文本，
但内容块宽度设置最大不能超过容器的100%减去0.25em，
否则使用伪元素:after内容块会被挤到容器顶部，
使用:before内容块会向下偏移100%。
如果你的内容块需要占据尽可能多的水平空间，
可以使用max-width: 99%;（针对较大的容器）
或max-width: calc(100% -0.25em)（取决于支持的浏览器和容器宽度）。
*/
.Center-Container.is-Inline {   
  text-align: center;  
  overflow: auto;  
}  
  
.Center-Container.is-Inline:after,  
.is-Inline .Center-Block {  
  display: inline-block;  
  vertical-align: middle;  
}  
  
.Center-Container.is-Inline:after {  
  content: '';  
  height: 100%;  
  margin-left: -0.25em; /* To offset spacing. May vary by font */  
}  
  
.is-Inline .Center-Block {  
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */  
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */   
}

优点：

  1. 高度可变
  2. 内容溢出会将父元素撑开。
  3. 支持跨浏览器，也适应于IE7。

缺点：

  1. 需要一个容器
  2. 水平居中依赖于margin-left: -0.25em;该尺寸对于不同的字体/字号需要调整。
  3. 内容块宽度不能超过容器的100% - 0.25em。

3.垂直居中:负外边距(Negative Margins)

如果块元素尺寸已知，可以通过以下方式让内容块居中于容器显示：
外边距margin取负数，大小为width/height（不使用box-sizing: border-box时包括padding，）的一半，再加上top: 50%; left: 50%;。即：

1
2
3
4
5
6
7
8
9
.is-Negative {  
        width: 300px;  
        height: 200px;  
        padding: 20px;  
        position: absolute;  
        top: 50%; left: 50%;  
        margin-left: -170px; /* (width + padding)/2 */  
        margin-top: -120px; /* (height + padding)/2 */  
}

测试表明，这是唯一在IE6-IE7上也表现良好的方法。

优点：

  1. 良好的跨浏览器特性，兼容IE6-IE7。
  2. 代码量少。

缺点：

  1. 不能自适应。不支持百分比尺寸和min-/max-属性设置。
  2. 内容可能溢出容器。
  3. 边距大小与padding,和是否定义box-sizing: border-box有关，计算需要根据不同情况。

    4.垂直居中: 变形(Transforms)

内容块定义transform: translate(-50%,-50%)必须带上浏览器厂商的前缀，还要加上

top: 50%; left: 50%;

1
2
3
4
5
6
7
8
9
.is-Transformed {   
  width: 50%;  
  margin: auto;  
  position: absolute;  
  top: 50%; left: 50%;  
  -webkit-transform: translate(-50%,-50%);  
      -ms-transform: translate(-50%,-50%);  
          transform: translate(-50%,-50%);  
}

优点：

  1. 内容可变高度
  2. 代码量少

缺点：

  1. IE8不支持

  2. 属性需要写浏览器厂商前缀

  3. 可能干扰其他transform效果

  4. 某些情形下会出现文本或元素边界渲染模糊的现象

5.垂直居中:表格单元格( Table-Cell )

总的说来这可能是最好的居中实现方法，因为内容块高度会随着实际内容的高度变化，浏览器对此的兼容性也好。最大的缺点是需要大量额外的标记，需要三层元素让最内层的元素居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
/*
内层元素使用 display:table-cell
外层元素使用 display:table
*/
.Center-Container.is-Table { display: table; }  
.is-Table .Table-Cell {  
  display: table-cell;  
  vertical-align: middle;  
}  
.is-Table .Center-Block {  
  width: 50%;  
  margin: 0 auto;  
}
1
2
3
4
5
6
7
<div class="Center-Container is-Table">  
  <div class="Table-Cell">  
    <div class="Center-Block">  
    <!-- CONTENT -->  
    </div>  
  </div>  
</div>

优点：

  1. 高度可变

  2. 内容溢出会将父元素撑开。

  3. 跨浏览器兼容性好。

缺点：

需要额外html标记

6.垂直居中: 利用Flexbox实现垂直居中

这是CSS布局未来的趋势。Flexbox是css3新增属性，设计初衷是为了解决像垂直居中这样的常见布局问题.
记住Flexbox不只是用于居中，也可以分栏或者解决一些令人抓狂的布局问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*父元素*/
.container{
      width: 300px;
      height: 200px;
      border: 3px solid #546461;
      display: flex;/*1*/
      display: -webkit-flex;
      align-items: center;/*2*/
      -webkit-align-items: center;
      justify-content: center;/*3*/
      -webkit-justify-content: center;
 }
 /*子元素*/
 .inner{
      border: 3px solid #458761;
      padding: 20px;
 }

优点：

  1. 内容块的宽高任意，优雅的溢出。
  2. 可用于更复杂高级的布局技术中。

缺点：

  1. IE8/IE9不支持。
  2. Body需要特定的容器和CSS样式。
  3. 运行于现代浏览器上的代码需要浏览器厂商前缀。
  4. 表现上可能会有一些问题。

7.绝对居中( Absolute Centering ) 强烈推荐

我们经常用margin:0 auto来实现水平居中，而一直认为margin:auto不能实现垂直居中……实际上，实现垂直居中仅需要声明元素高度和下面的CSS:

1
2
3
4
5
.Absolute-Center {  
  margin: auto;  
  position: absolute;  
  top: 0; left: 0; bottom: 0; right: 0;  
}

居中方式:

内容块的父容器设置为position:relative，使用上述绝对居中方式，可以使内容居中显示于父容器。

1
2
3
4
5
6
7
8
9
10
11
12
.Center-Container {  
  position: relative;  
}  
  
.Absolute-Center {  
  width: 50%;  
  height: 50%;  
  overflow: auto;  
  margin: auto;  
  position: absolute;  
  top: 0; left: 0; bottom: 0; right: 0;  
}