居中

水平居中

行内元素(单行/多行)

  text-align:center;

单行块级元素

  margin: 0 auto

多行块级元素

 .outer{
      text-align: center;
 }
 .inner{
      display: inline-block;
  }

 <div class="center">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
   </div>

垂直居中

单行行内元素

1. padding-top = padding-bottom

2. height = line-height

已知高度的块级元素

  .parent{
      position:relative;
  }
 .children{
      position:absolute;
      top:50%;
      height:100px;
      margin-top:-50px;
  }

已知高度的块级元素

 .parent{
      position:relative;
  }
 .children{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
  }

已知高度、未知高度都可使用flex

.parent{
      display:flex;
      flex-direction: column;
      justify-content: center;
  }

水平垂直居中

宽高已知

.parent { 
    position: relative;
 } 
.child { 
    width: 300px;
    height: 100px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin: -70px 0 0 -170px;
 }

宽高未知

.parent {
   position: relative;
 } 
.child {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }

flex布局

.parent {
   display: flex;
   justify-content: center;
   align-items: center;
 }