[CSS]水平垂直居中方案

简单总结一下常用的水平垂直居中方案

直接在父级元素设置 text-align 和 line-height ,针对未浮动的行内元素

 <div class="box">
     <span class="item">我是span标签</span>
  </div>

 .box {
       width: 600px;
       height: 400px;
       margin: 50px auto;
       border: 1px solid red;

       line-height: 400px;
       text-align: center;
     }

在父级设置 line-height ，在本身设置 margin 值和 transform 属性，针对已浮动的行内元素

 .item {
       float: left;
       margin-left: 50%;
       transform: translateX(-50%);
     }

　　

通过定位，这种方案是比较常用的手段，不区分是否浮动，前提是父级有宽高。

　　块级元素在父级设置 position: relative;

 .box {
       width: 600px;
       height: 400px;
       margin: 50px auto;
       border: 1px solid red;
       position: relative;
     }

　　在本身设置 position: absolute;

 .item {
       display: block;
       width: 100px;
       height: 100px;
       color: white;
       background: #000;

       /* 方案一 */
       position: absolute;
       left: 50%;
       top: 50%;
       margin-left: -50px; /* 值为本身宽度的一半 */
       margin-top: -50px;  /* 值为本身高度的一半 */
       /* transform: translate(-50%, -50%);  可以代替margin，IE9以下不支持 */

       /* 方案二 */
       top:;
       left:;
       bottom:;
       right:;
       margin: auto;
     }

　　

　　行内元素，父级设置和上面一样，本身设置如下：

 .item {
       position: absolute;
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
     }

推荐方案：flex布局

 .box {
       width: 600px;
       height: 400px;
       margin: 50px auto;
       border: 1px solid red;

       display: flex;
       justify-content: center;
       align-items: center;
     }