水平居中

行内元素：在其父元素上设置text-align：center

. container {
    text-align: center;
}

注：此种方式.container要设置宽度才有效果

块级元素：给其设置宽度，左右margin： auto

.container {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

水平居中还可以使用绝对定位和flex布局的方式，具体见下面垂直居中的绝对定位和flex布局方式

垂直居中

行内元素：
1.将高度和line-height设置相同

box {
    height:30px; 
    line-height:30px;
}

2.设置上下padding相同

.box  {
    padding: 10px 0;
}

3.vertical-align实现定位,此种方法的原理是在容器上设置一条垂直的充满整个高度的，没有宽度的inline-block的线条，给这个线条设置个vertical-align，在给需要垂直居中的行内元素设置vertical-align以便和前面的线条居中对齐

.box::before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.box img{
  vertical-align: middle;
  background: blue;
}

块级元素：
1.绝对定位实现居中,给需要相对的父级以上的容器设置position：relative

.box {
    width: 400px;
    height: 300px;
    position: absoulue;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

2.使用display: table-cell让标签元素以表格单元格的形式呈现，类似于td标签。然后使用vertical-align： middle实现居中
注:这方式如果不给容器设置宽度，容器宽度会收缩至内容的大小

.box {
    width: 400px;
    height: 300px;
    display: table-cell;
    vertical-align: middle;
}

3.display: flex实现居中
①通用方法：align-items: center;设置垂直居中；justify-content: center;实现水平居中。

<div class="space">
  <div class="earth"></div>
</div>

.space {
  width: 100vw;
  height: 100vh;  /* 设置宽高以显示居中效果 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */    
}
.earth::after {
  content: '🌏';
  font-size: 85px;
}

②对于flex布局中的块级元素可以单独设置margin:auto;垂直水平居中（margin:auto 0;垂直居中。margin:0 auto;水平居中）

<div class="space">
  <div class="earth"></div>
</div>

.space {
  width: 100vw;
  height: 100vh;  /* 设置宽高以显示居中效果 */
  display: flex;  /* 弹性布局 */  
}
.earth {
  width:50px;
  height:50px;
  border-radius:50px;
  background:#00ffff;
  margin:auto;
}