css居中布局的几种方法

在我们日常开发的时候，经常会使用到css 的居中布局，不论是移动端还是我们的pc端，今天总结归纳几种css居中布局的方法，代码可以自己修改 ，为了演示，所以自己加 了宽高，有错误欢迎大家指正。

1： 水平居中方法 ：

主要知识点：父级元素parent设置 text-align: center;
子元素child设置 display: inline-block;

如图： shuip.png

css代码一

.parent{
              text-align: center; 
              width: 500px;
              height: 500px;
              margin: 10px auto;
              background: #ccc;
      }
.parent  .child{ 
                   display: inline-block;
                    padding: 10px;  
                    background: pink;
      }

css代码二：

 .parent{
     background: #ccc;
     width:  600px;
     height: 600px;
     margin: 20px auto;
     position: relative;
}
.parent   .child{
       position: absolute;
       left: 50%;
       background: pink;
       padding: 10px;
       transform:translateX(-50%);
   }

html代码：

 <div class="parent">
      <div class="child">
          我是垂直居中显示
      </div>
 </div>

2:垂直居中方法：

如图： 2.png

css代码一:

  .parent{
       display: table-cell;
       vertical-align: middle;
       width: 500px;
       height: 600px;
       background: #ccc;
 }
.parent .child{
      background: pink;
      padding: 10px;
      width: 100px;
  }

html代码：

 <div class="parent">
      <div class="child">
          我是垂直居中显示
      </div>
 </div>

3:垂直水平都居中：

如图： 5.png

css代码一：

.parent{
             text-align: center;
             background: #ccc;
             height: 600px;
             width: 600px;
             display: table-cell;
             vertical-align: middle;
     }
.parent  .child{
            display: inline-block;
            background: pink;
            padding: 10px;
            width: 150px;
            height: 150px;
     }

css代码二：

 .parent{
             background: #ccc;
             height:400px;
             width: 400px;
              position: relative;
     }
     .child{
            background: pink;
            padding: 10px;
            width: 150px;
            height: 150px;
            position: absolute;
            left: 50%;
            top:50%;
            transform: translate(-50%,-50%);
     }

css代码最终版本

  .parent{
            display: flex;
            justify-content: center;
            align-items: center;
            background: #ccc;
            height:600px;
            width: 400px；
     }
     .child{
            background: pink;
            padding: 10px;
            width: 150px;
            height: 150px;
     }

html代码

   <div class="parent">
     <div class="child">
          我是垂直居中和水平居中显示
          父级大小，子集大小  ，不固定可以随意更改大小
     </div>
 </div>