分别实现水平居中，垂直居中，垂直水平居中的几种方法分别实现水平居中，垂直居中，垂直水平居中的几种方法水平居中 (宽高不

分别实现水平居中，垂直居中，垂直水平居中的几种方法

  <div class="container">
    <div class="main">123</div>
  </div>

水平居中

(宽高不固定)

方法一 margin:0 auto
.main{
    margin:0 auto
}

方法二 弹性盒子
.container{
    display:flex;
    justify-content:center
}

方法三 绝对定位+transform
.container{
    position:relative
}
.main{
    position:absolute;
    left:50%;
    transform:translateX(-50%)
}

方法四 绝对定位+margin
.container{
    position:relatice;
}
.main{
    position:absolute;
    left:0;
    right:0;
    margin:0 auto
}

方法五 转为行内块元素
.container{
    text-algin:center
}
.main{
    display:inline-block
}

方法六 display：box
.container{
    display:-webkit-box;
    -webkit-box-pack: center;
}

方法七 gird布局
.container{
    display:gird;
    justify-content:center
}

垂直居中

方法一 弹性盒子
.container{
    display:flex;
    align-items:center;
}

方法二 绝对定位+margin
.container{
    position:relative
}
.main{
    position:absolute;
    top:0;
    bottom:0;
    margin:auto 0
}

方法三 绝对定位＋transform
.container{
    position:relative;
}
.main{
    position:relative;
    top:50%;
    transform:translateY(50%)
}

方法四： display: box
  .container {
    display: -webkit-box;
    -webkit-box-align: center
  }

方法五：writing-mode + text-align
  .container {
    writing-mode: vertical-lr; /*文本垂直*/
    text-align: center;
  }
  .main {
    display: inline-block;
  }

方法六：writing-mode + margin
  .container {
    writing-mode: vertical-lr;  /*文本垂直*/
  }
  .main {
    margin: auto 0;
  }

方法七  gird
.container {
    display: grid;
    align-items: center;
  }

水平垂直居中

方法一：弹性盒子
.container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

方法二 gird
.container{
    display:grid;
    align-items:center;
    justyfi-content:center
}

方法三：绝对定位+transform
.container{
    position:relative;
}
.main{
    position:relative;
    left:50%;
    top:50%;
    transform:translateX(50%) translateY(-50^%)
}

方法四 绝对定位+margin
.container{
    positon:absolute;
    top:0;
    bottonm:0;
    left:0;
    right:0;
    margin:auto
}


方法五： 弹性盒子＋margin
.container{
    display:flex;
}
.main{
    margin:auto;
}

方法六 转为行内块元素
  .container {
    line-height: 600px;
    text-align: center;
    display: inline-block;
  }
  .main {
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
  }
  
方法七  display：box
  .container {
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center
  }