css垂直居中的6种方式

在线demo演示地址：https://rondsjinhuajin.github.io/demo/index.html

个人博客主页：KinHKin的博客_CSDN博客-vue,中秋活动,性能优化领域博主

使用人群：前端面试，日常开发小技巧

目录

1、效果演示如下 

​编辑

1、使用display:flex实现

2、使用position + transform: translate(-50%,-50%)实现

3、使用position+margin减去子元素宽高的一半实现

4、使用position+margin:auto实现

5、使用grid+align-self+justify-self实现

6、使用css-table实现

7、总结

---

1、效果演示如下 

 注意：一个元素要想实现垂直水平居中，必须要有一个参照物，这个参照物要么是父级div元素，要么就是body元素。本文为父元素高度未知，子元素垂直水平居中方案。以下所有的css都经过博主亲自测验通过才发出，请放心使用❤️

    <!-- dom元素 -->
    <div class="parent">
      父元素
      <div class="child">子元素</div>
    </div>

以下是css部分： 

1、使用display:flex实现

   .parent {
        width: 100%;
        height: 100%;
        background-color: brown;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .child {
        width: 400px;
        height: 400px;
        background-color: blue;
      }

2、使用position + transform: translate(-50%,-50%)实现

   .parent {
        width: 100%;
        height: 100%;
        background-color: brown;
        position: relative;
      }
      .child {
        width: 400px;
        height: 400px;
        background-color: blue;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
      }

3、使用position+margin减去子元素宽高的一半实现

   .parent {
        width: 100%;
        height: 100%;
        background-color: brown;
         /* 第一种 */
        /* display: flex;
        align-items: center;
        justify-content: center; */
        position: relative;
      }
      .child {
        width: 400px;
        height: 400px;
        background-color: blue; 
        /* 第二种 */
        /* position: absolute; 
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%); */
        /* 第三种 */
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -200px 0 0 -200px;
      }

4、使用position+margin:auto实现

     .parent {
        width: 100%;
        height: 100%;
        background-color: brown;
         /* 第一种 */
        /* display: flex;
        align-items: center;
        justify-content: center; */
        position: relative;
      }
      .child {
        width: 400px;
        height: 400px;
        background-color: blue; 
        /* 第二种 */
        /* position: absolute; 
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%); */
        /* 第三种 */
        /* position: absolute;
        left: 50%;
        top: 50%;
        margin: -200px 0 0 -200px; */
        /* 第四种 */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }

5、使用grid+align-self+justify-self实现

注意：这种方式父元素要没有其他的子元素或者是内容

 效果图如下：

 代码如下：

.parent {
        width: 100%;
        height: 100%;
        background-color: brown;
        display: grid;
      }
      .child {
        width: 400px;
        height: 400px;
        background-color: blue; 
        align-self: center;
        justify-self: center;
      }

6、使用css-table实现

注意：这种方式其实是父元素要固定宽高，我这里是用vh来定，类似于百分比 

.parent {
        width: 100vw;
        height: 100vh;
        background-color: brown;
   
         /* 第六种 */
         display: table-cell;
          text-align: center;
          vertical-align: middle;
 
      }
      .child {
        width: 400px;
        height: 400px;
        background-color: blue; 
        /* 第六种 */
        display: inline-block;
      }

7、总结

这里实现了比较常用的垂直水平居中的方案，十分有用，希望对于面试必考题来说，只要熟练掌握前面三种，基本上是没有问题了，源码我会放在本人主页的资源里面，供大家免费下载，创作不易，关注一下，后续将带来vue版本大屏可视化解决方案。敬请期待吧~~~❤️