CSS居中的方法总结

CSS水平和垂直居中在开发中经常用到，在此加以总结。

水平居中方法

1.行内元素水平居中，设置父元素的text-align: center。

<div id="box" >
  <span id="content" >center</span>
</div>

#box {
  text-align: center;
}

常用的行内元素有a、abbr、b、br、em、input、label、select、span、strong、sub、sup、textarea等。

2.宽度固定的块级元素水平居中，设置该元素的margin: 0 auto。

<div id="box" >
  <div id="content" >center</div>
</div>

#box {
  width: 64%;
  margin: 0 auto;
}

常用的块级元素有address、article、audio、blockquote、canvas、div、footer、form、h1、header、hr、ol、output、p、pre、section、table、ul、video等。

3.绝对定位元素水平居中，设置父元素position: relative，设置该元素left: 0; right: 0; margin: 0 auto;。

<div id="box" >
  <div id="content" >center</div>
</div>

#box {
  position: relative;
 }
#content {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

4.flex布局水平居中，设置父元素display: flex; justify-content: center。

<div id="box" >
  <div id="content" >center</div>
</div>

#box {
  display: flex;
  justify-content: center;
}

垂直居中方法

1.单行文本垂直居中，设置该元素line-height为父元素height高度。

<div id="box" >
  <div id="content" >center</div>
</div>

#content {
  height: 2em;
  line-height: 2em;
}

2.将父元素显示为表格display: table-cell，利用vertical-align: middle设置垂直居中。

<div id="box" >
  <div id="content" >center</div>
</div>

#box {
  display: table-cell;
  vertical-align: middle;
 }

3.绝对定位该元素并设置父元素positoin: relative，设置该元素top:0; bottom: 0; margin: auto;

<div id="box" >
  <div id="content" >center</div>
</div>

#box {
  position: relative;
 }
#content {
  position: absolute;
  top: 0;
  bottom: 0;
  marigin: auto;
}

4.绝对定位固定高度是，设置top: 50%，margin-top值为高度值的一半。

<div id="box" >
  <div id="content" >center</div>
</div>

#box {
  position: relative;
 }
#content {
  position: absolute;
  height: 12em;
  top: 50%;
  margin-top: 6em;
}

5.flex布局，设置父元素display: flex; align-items: center

<div id="box" >
  <div id="content" >center</div>
</div>

#box {
  display: flex; 
  align-items: center;
 }