一个盒子不给宽度和高度如何实现水平垂直居中？

实现水平垂直居中的方式很多：flex布局、定位+transform、.grid布局（网格布局）、定位+margin（需要给宽度）、table布局、文本元素 line-height等。

<div class="container">

    <div class="box">水平垂直居中</div>

  </div>

方式一：flex布局

.container{

      width: 300px;

      height: 200px;

      margin: 0 auto;  // 可有可无

      border: 5px solid pink;

      display: flex;

      justify-content: center;

      align-items: center;

    }

    .box {

      background-color: red;

      color: #fff;

    }

方式二：定位（position）+ transform

 .container{

      width: 300px;

      height: 200px;

      margin: 0 auto;

      border: 5px solid pink;

      position: relative;

    }

    .box {

      background-color: red;

      position: absolute;

      top: 50%;

      left: 50%;

      transform: translate(-50%, -50%);

    }

方式三：Grid布局

.container {

      width: 300px;

      height: 200px;

      margin: 0 auto;

      border: 5px solid pink;

      display: grid;

      place-items: center;

    }

    .box {

      background-color: red;

      color: #fff;

    }

方式四：table布局

.container {

      width: 300px;

      height: 200px;

      /* margin: 0 auto; 不起作用 */

      border: 5px solid pink;

      display: table-cell;

      vertical-align: middle;

      text-align: center;

    }

    .boxx {

      display: inline-block;

      background-color: red;

      color: #fff;

    }

方式五：文本元素居中

.container {

      width: 300px;

      height: 200px;

      border: 5px solid pink;

      text-align: center;

      line-height: 200px;

 }