CSS之水平垂直居中

如何实现一个div的水平垂直居中

   

      
content
    

1. flex布局

 .content-wrapper {
      width: 400px;
      height: 400px;
      background-color: lightskyblue;
      display: flex;
  服务器托管网    justify-content: center;
      align-items: center;
 }

2. transform

 .content-wrapper {
      width: 400px;
      height: 400px;
      background-color: lightskyblue;
      position: relative;
    }
    .content {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
    }

3. 定位

 .content-wrapper {
      width: 400px;
      height: 400px;
      background-color: lightskyblue;
      position: relative;
    }
    .content {
      width: 60px;
      height: 20px;
      position: absolute;
      left: 170px;
      top: 190px;
    }

4. 计算距离

 .content-wrapper {
      width: 400px;
      height: 400px;
      background-color: lightskyblue;
      padding-top: 190px;
      padding-left: 170px;
      box-sizing: border-box;
    }
    .content-wrapper .content {
      width: 60px;
      height: 20px;
    }

5. display:table-cell

  .content-wrapper {
      width: 400px;
      height: 400px;
      background-color: lightskyblue;
      display: table-cell;
      vertical-align: middle;
    }
    .content-wrapper .content {
      width: 100%;
      height: 20px;
      text-align: center;
    }

6. line-height

  .content-wrapper {
      width: 400px;
      height: 400px;
      background-color: lightskyblue;
      line-height: 400px;
    }
    .content-wrapper .content {
      width: 100%;
      height: 20px;
      text-align: center;
    }

7. margin: auto

  .content-wrapper {
      wi服务器托管网dth: 400px;
      height: 400px;
      background-color: lightskyblue;
      position: relative;
    }
    .content {
      width: 60px;
      height: 20px;
      margin: auto;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: ASP.NET Core Web API下基于Keycloak的多租户用户授权的实现

在上文《Keycloak中授权的实现》中，以一个实际案例介绍了Keycloak中用户授权的设置方法。现在回顾一下这个案例： 服务供应商（Service Provider）发布/WeatherForecast API供外部访问 在企业应用（Client）里有三个…