CSS水平垂直居中使用方式

效果图

不同写法的水平垂直居中

.元素水平居中

 .el-main{
   margin: 0 auto;
   text-align: center;
 }

1.position 元素已知宽度

      <div class="box1" v-show="showVisible">
        <div class="content1">
          盒子1
        </div>
      </div>

 .box1 {
    background-color: #2C3E50;
    width: 300px;
    height: 300px;
    position: relative;
  }

  .content1 {
    background-color: #41B883;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
    /* //文字在块内垂直居中 */
    line-height: 100px;
    /* //文字居中 */
    text-align: center;
  }

2.position transform 元素未知宽度

 <div class="box2" v-show="showVisible">
        <div class="content2">
          盒子2
        </div>
      </div>

 .box2 {
    background-color: palegoldenrod;
    width: 300px;
    height: 300px;
    position: relative;
  }

  .content2 {
    background-color: salmon;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* //文字在块内垂直居中 */
    line-height: 100px;
    /* //文字居中 */
    text-align: center;
  }

3.flex布局

  <div class="box3" v-show="showVisible">
        <div class="content3">
          盒子3
        </div>
      </div>

  .box3 {
    background-color: #41B883;
    width: 300px;
    height: 300px;
    display: flex; //flex布局
    justify-content: center; //使子项目水平居中
    align-items: center; //使子项目垂直居中
  }

  .content3 {
    background-color: #B3C0D1;
    width: 100px;
    height: 100px;
    /* //文字在块内垂直居中 */
    line-height: 100px;
    /* //文字居中 */
    text-align: center;
  }

4.table-cell布局

因为table-cell相当与表格的td，td为行内元素，无法设置宽和高，所以嵌套一层，嵌套一层必须设置display: inline-block;td的背景覆盖了橘黄色，不推荐使用

   <div class="box4" v-show="showVisible">
        <div class="content4">
          <div class="inner">
            盒子4
          </div>
        </div>
      </div>

  .box4 {
    background-color: #FF8C00; //橘黄色
    width: 300px;
    height: 300px;
    display: table;
  }

  .content4 {
    background-color: saddlebrown; //马鞍棕色
    display: table-cell;
    vertical-align: middle; //使子元素垂直居中
    text-align: center; //使子元素水平居中
  }

  .inner {
    background-color: orange; 
    display: inline-block;
    width: 20%;
    height: 20%;
    /* //文字在块内垂直居中 */
    line-height: 60px;
    /* //文字居中 */
    text-align: center;
  }

特别说明

此示例是在vue环境编写，可能会有一些偏差。具体以实际效果为准。
希望对你有所帮助，努力的人都应被善待——至程序猿们