块级元素的水平垂直居中

绝对定位 + transform: translate(-50%,-50%)

已知宽高的元素绝对定位的水平居中实现：

<style>
  .center-vertical {
    width: 100px;
    height: 100px;
    background-color: orange;

    position: absolute;
    top:50%;
    left: 50%;
    margin-left: -50px;   /* 宽度的一半 */
    margin-top: -50px;  /* 高度的一半 */
  }
</style>

<body>
    <div class="center-vertical"></div>
</body>

未知宽高的元素绝对定位水平垂直居中的实现：

使用 transform 代替 margin。
transform 中 translate 偏移的百分比是相对于元素自身大小而言。

<style>
  .center-vertical {
    width: 100px;
    height: 100px;
    background-color: orange;

    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
</style>

<body>
    <div class="center-vertical"></div>
</body>

绝对定位 + margin: auto;

<style>
  .center-vertical {
    width: 100px;
    height: 100px;
    background-color: orange;

    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
</style>

<body>
    <div class="center-vertical"></div>
</body>

flex布局

<style>
  html,body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  body {
    display: flex;
    justify-content: center;    /* 定义body的元素的水平居中 */
    align-items: center;    /* 定义body元素的垂直居中 */
  }

  .center-vertical {
    width: 100px;
    height: 100px;
    background-color: orange;
  }
</style>

<body>
    <div class="center-vertical"></div>
</body>

相对定位 + transform: translate(-50%,-50%)

<style>
  html,body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .center-vertical{
    width: 100px;
    height: 100px;
    background-color: orange;

    position: relative;
    top: 50%;   /* 偏移 */
    left: 50%;
    transform: translate(-50%,-50%);
  }
</style>

<body>
    <div class="center-vertical"></div>
</body>

<style>
  html,body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .center-vertical{
    width: 100px;
    height: 100px;
    background-color: orange;

    position: relative;
    margin: auto;
    top: 50%;
    /* margin-top: -150px; */  /* 第一种：margin-top: 宽度的一半要计算 */
    transform: translateY(-50%);    /* 第二种：transformY(-50%) */
  }
</style>

<body>
    <div class="center-vertical"></div>
</body>

display: table

<style>
    .parent{
        width: 300px;
        height: 300px;
        background-color: orange;
        display: table;
        text-align: center;
    }
    .son{
        display: table-cell;
        vertical-align: middle;
    }
</style>

<div class="parent">
    <div class="son">是南栀呀1~</div>
    <div class="son">是南栀呀2~</div>
</div>

行内元素的水平垂直居中

图片：vertical-align:middle

verical-align 定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

允许指定负长度值和百分比值。这会是元素降低而不是升高。

在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

行内元素： text-align: center; line-height: 盒子的高度;

<style>
    .big-box{
        width: 300px;
        height: 300px;
        background-color: green;
        text-align: center;     /* 水平居中 */
        line-height: 300px;     /* 等于高度 */
    }
    img{
        vertical-align: middle;
    }
</style>

<div class="big-box">
    <span>
        是南栀呀~
        <img src="../image/易烊千玺1.jpg" width="100px" height="100px">
    </span>
</div>

css实现水平垂直居中