css居中的多种方法

水平居中

text-align 与 inline-block 的配合

<div id = "div_center_align">
    <div id = "div_center_test"></div>
</div>

#div_center_align {
    text-align: center
}
#div_center_test {
    border:1px solid #ccc;
    background-color: #ff2c42;
    display: inline-block;
  height: 10em;
    width: 10em;
}

通过 margin 实现

<div id = "div_center_margin"></div>

#div_center_margin {
  width: 10em;
  height: 10em;
  border: 1px solid #ccc;
  background-color: #ff2c42;
  margin: 0 auto;
}

垂直居中和水平居中

margin和absolute实现

实现方法一

<div id="div_center_margin02">
  <div id="div_center_test"></div>
</div>

#div_center_margin02 {
  position: relative;/*外层父元素相对定位*/
  background-color: #ff2c42;
  height: 20em;
    width: 50em;
}
#div_center_test {
  border:1px solid #ccc;
    background-color: #4053ff;
  height: 10em;
    width: 10em;
  position: absolute;/*本身设置为absolute定位*/
  top: 0;/*四项全为0*/
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;/*外边距设置为auto*/
}

实现方法二

<div id="div_center_margin02">
  <div id="div_center_test"></div>
</div>

#div_center_margin02 {
  position: relative;
  background-color: #ff2c42;
  height: 20em;
    width: 50em;
}
#div_center_test {
  border:1px solid #ccc;
    background-color: #4053ff;
  height: 10em;
    width: 10em;
  position: absolute;
  
  /*主要修改了下面三行代码*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

基于Flexbox的解决方案

Flexbox（伸缩盒）是专门针对这类需求设计的。

<div id="div_center_flex">
  <div id="div_center_test"></div>
</div>

#div_center_flex {
    display: flex;/*父元素display为flex即可*/
    height: 20em;
    width: 50em;
    background-color: #ff2c42;
}
#div_center_test {
    border:1px solid #ccc;
    background-color: #4053FF;
    height: 10em;
    width: 10em;
    margin: auto;/*子元素外边距auto*/
}