css水平垂直居中对齐方法汇总(实测有用)

Joker • • 前端笔记 • 301 阅读

   我们在前端页面布局工作中，经常会用到css水平居中和css垂直居中对齐，关于css水平居中的方法，可以看下已往文章《常见css布局水平居中的6种方法》，今天这篇文章是css水平垂直居中对齐方法汇总整理。

0.效果演示（垂直居中对齐，同时也水平居中对齐）

css水平垂直居中对齐方法

1.方法：css3弹性布局flex，使用率极高





css3弹性布局flex水平垂直居中
    
      .box{
          width:300px;
          height:300px;
          background: #0000EE;
          display: flex;
          align-items: center;
          justify-content: center;
      }
       .box .son{
          width:100px;
          height:100px;
          line-height: 100px;
          background-color: red;
      }
    


    
      我是儿子盒子
    

2.方法：绝对定位+transform





绝对定位+transform水平垂直居中
    
      .box{
          width:300px;
          height:300px;
          background: #0000EE;
          position: relative;
      }
       .box .son{
          width:100px;
          height:100px;
          margin: 0 auto;
          line-height: 100px;
          background-color: red;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
      }
    


    
      我是儿子盒子