爱客仕-前端团队博客园

闲话css居中

发表于 |

前言

最近捧读了我们团队诸位童鞋写的博客，一些概念还在云里雾里，个人愚见，临渊羡鱼，不如退而结网。夯实基础方能登堂入室习得上乘武功嘛～在日常开发过程中，经常遇到需要需要让元素居中展示，在此总结几种常用的写法，实际情况灵活使用，不对之处还望不吝赐教。（为了方便说明，请忽略文中的css命名规则与重复属性，实际项目中不可取）

一.水平居中

1.水平居中单个元素

水平居中单个元素应该是最简单的，行内元素容器设置text-align: center, 块级元素自身设置magin:0 auto即可

1
2
3
4
5
6
7
8
<div class="specified－width-ele text-align-center">
    <span class="inline-ele">
      我是行内元素，我用text-align居中
    </span>
    <div class="block-ele margin-0-auto">
      我是块级元素，我用magin居中
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.specified－width-ele {  /* 外层定宽块级父元素 */
  width: 800px;
  height: 100px;
  border: 1px solid #e3e3e3
}
.inline-ele {            /* 内部内联子元素 */
  border: 1px solid #e3e3e3
}
.block-ele {             /* 内部块级子元素 */
  width: 200px;
  border: 1px solid #e3e3e3
}
.margin-0-auto {
  margin: 0 auto;
}

2.水平居中多个元素之inline-block版

1
2
3
4
5
6
7
8
9
10
11
<div class="specified－width-ele text-align-center">
  <div class="block-ele display-inline-block">
    块级元素1
  </div>
  <div class="block-ele display-inline-block">
    块级元素2
  </div>
  <div class="block-ele display-inline-block">
    块级元素3
  </div>
</div>
1
2
3
.display-inline-block {
  display: inline-block;
}

父元素设置text-align:center,子元素display:inline-block,块之间的间隔可以用标签之间无空格去掉

[注意]若要兼容IE7-浏览器，可使用display:inline;zoom:1，来达到inline-block的效果

3.水平居中多个元素之flexbox版

1
2
3
4
5
6
7
8
9
10
11
<div class="specified－width-ele display-flex-13">
   <div class="block-ele">
     块级元素1
   </div>
   <div class="block-ele">
     块级元素2
   </div>
   <div class="block-ele">
     块级元素3
   </div>
</div>
1
2
3
4
.display-flex-13 {
  display: flex;
  justify-content: center;
}

【1】在伸缩容器上设置主轴对齐方式justify-content:center

【2】在伸缩项目上设置margin: 0 auto

[注意]IE9-浏览器不支持

此种方法将所有块级子元素全部居中，虽然display:inline-block的方式需要父子元素都加上css或者多余类，但是可以控制居中的子元素数量

二.垂直居中

1.垂直居中inline元素

(1) 垂直居中单行inline元素

1
2
3
4
5
<div class="specified－width-ele">
  <span class="inline-ele line-height-2-1-1">
    我是单行内联元素，我用line-height垂直居中
  </span>
</div>
1
2
3
.line-height-2-1-1 {
  line-height: 100px;
}

总是在网上看到一种流行的说法，单行垂直居中要将高度和行高设置成相同的值，但高度其实没必要设置。实际上，文本本身就在一行中居中显示。在不设置高度的情况下，行高可以撑开高度

(2) 垂直居中多行inline元素之table-cell版

1
2
3
4
5
6
7
8
9
10
11
<div class="specified－width-ele table-2-1-2">
    <span class="inline-ele table-cell-2-1-2">
      我是单行内联元素1
    </span>
    <span class="inline-ele table-cell-2-1-2">
      我是单行内联元素2
    </span>
    <span class="inline-ele table-cell-2-1-2">
      我是单行内联元素2
    </span>
</div>
1
2
3
4
5
6
7
8
9
.table-2-1-2 {
  height: 100px;
  width: 800px;
  display: table;
}
.table-cell-2-1-2 {
  display: table-cell;
  vertical-align: middle;
}

通过为table-cell元素设置vertical-align:middle，可使其子元素均实现垂直居中。这和表格里单元格的垂直居中是类似的。

[注意]设置为table-cell的div不能使用浮动或绝对定位，因为浮动或绝对定位会使元素具有块级元素特性，从而丧失了table-cell元素具有的垂直对齐的功能。若需要浮动或绝对定位处理，则需要外面再套一层div。

(3) 垂直居中多行inline元素之flexbox版

1
2
3
4
5
6
7
8
9
10
11
<div class="specified－width-ele display-flex-2-1-3">
    <span class="inline-ele">
      我是单行内联元素1
    </span>
    <span class="inline-ele">
      我是单行内联元素2
    </span>
    <span class="inline-ele">
      我是单行内联元素3
    </span>
</div>
1
2
3
4
5
.display-flex-2-1-3 {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

2.垂直居中block元素

相比较于水平居中，垂直居中略显艰难，大部分原因是不能正确使用vertical-align。实际上，只要备足粮草，自然可以行军，接来下储备下关于垂直居中的几种思路，做到有备无患。

(1) 绝对定位居中之calc版

1
2
3
4
5
<div class="specified－width-ele position-relative">
  <div class="block-ele absolute-calc-vertical-align">
    我是块级元素，我用position:absolute和calc垂直居中
  </div>
</div>
1
2
3
4
5
6
.absolute-calc-vertical-align {
  height: 20px;        /* 此处加的高度是为了计算top,同时体现了此方法的弊端 */                   
  position: absolute; 
  left: calc(50% - 100px);
  top: calc(50% - 10px);
}

显然，这种方法最大的问题是，元素需要一个固定的尺寸，而需要垂直居中元素的尺寸常常是需要由它的内容来决定。如果我们有办法使用百分比来控制元素尺寸，我们的问题就解决了。不幸的是，对于大多数CSS属性（包括margin）百分比的值是相对于其父元素的宽度来决定

(2) 绝对定位居中之translate版

1
2
3
4
5
<div class="specified－width-ele position-relative">
  <div class="block-ele absolute-translate-vertical-align">
    我是块级元素，我用position:absolute和translate垂直居中
  </div>
</div>
1
2
3
4
5
6
.absolute-translate-vertical-align {
  position: absolute;   /* 此处没加高度，和文字自适应，是此方法的优点 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

translate函数的百分比是相对于自身高度的，所以top:50%配合translateY(-50%)可实现居中效果

和上面的方法对比， 弊端:(1)绝对定位通常不是一个很好的选择，因为它对整体的布局影响相当的大。(2)如果垂直居中元素的内容比视窗高度更高的话，它的顶部会被裁剪掉。

[注意]IE9-浏览器不支持

[注意]若子元素的高度已知，translate()函数也可替换为margin-top: 负的高度值

(3) flexbox居中

1
2
3
4
5
<div class="specified－width-ele display-flex">
   <div class="block-ele margin-auto">
      我是块级元素，我用父元素flexbox和自身margin垂直居中
   </div>
</div>
1
2
3
4
5
6
.display-flex {
  display: flex;
}
.margin-auto {
  margin: auto;
}

【1】在伸缩容器上设置侧轴对齐方式align-items: center

【2】在伸缩项目上设置margin: auto 0

flexbox: “这也称得上挑战吗？”