CSS之水平垂直居中

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

   <div class="content-wrapper"><div class="content">content</div></div>

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 {width: 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;}