前端 样式 水平垂直居中

水平居中

水平居中这个问题首先要搞清楚存在两个条件才能够称之为水平居中，即父元素必须是块级盒子容器，父元素宽度必须已经被设定好，下面对子元素的不同情况进行讨论：

• 子元素为行内元素，宽度是由其内容撑开的
  这种情况下解决方案是给父元素设定text-align:center;

html代码：

<div class="wrap center">
    <span class="span">1111</span>
</div>

css代码

.wrap{
          width: 300px;
          height: 200px;
          border: 2px solid #ccc;
          box-sizing: border-box;
      }
 .span{
            background: red;
        }
 .center{
            text-align: center;
        }

• 子元素是块级元素且宽度已经设定

• 给子元素添加margin:0 auto;

HTML代码

<div class="wrap">
    <div class="child auto">
        non-child
    </div>
</div>

css代码：

.child{
            width: 100px;
            height: 100px;
            background: green;
            box-sizing: border-box;
        }
        .auto{
            margin:0 auto;
        }
   .wrap{
          width: 300px;
          height: 200px;
          border: 2px solid #ccc;
          box-sizing: border-box;
      }

• • 通过子元素相对父元素绝对定位

html代码

<div class="relative">
    <div class="child absolute">
        non-child
    </div>
</div>

css代码

.relative{
            width: 300px;
            height: 200px;
            border: 2px solid #ccc;
            box-sizing: border-box;
            position: relative;
        }
        .absolute{
            position: absolute;
            left:50%;
            margin-left:-50px;
        }
   .child{
            width: 100px;
            height: 100px;
            background: green;
            box-sizing: border-box;
        }

这里还要设定子元素margin-top为-50是需要消除父元素50%造成的偏移

• 利用flex-box，父元素设置弹性盒子（可用于多个盒子水平居中）

HTML代码

<div class="flex">
    <div class="child ">
        non-child
    </div>
</div>

css代码

 .flex{
            width: 300px;
            height: 200px;
            border: 2px solid #ccc;
            box-sizing: border-box;
            display:flex;
            justify-content:center;

        }
  .child{
            width: 100px;
            height: 100px;
            background: green;
            box-sizing: border-box;
        }

• 多个块状元素水平居中
  将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center即可

#container{
    text-align:center;
}

#center{
    display:inline-block;
}

• 通过translateX设置偏移量

 #outer{  
                height: 300px;  
                width: 300px;  
                border:1px solid red;  
                position: relative;  
            }  
            #myDiv2{  
                height: 100px;  
                width: 100px;  
                background: yellow;  
                position: absolute;  
                left: 50%;  
                transform:translateX(-50%);  

定位元素的left/top等是相对于父元素的宽高的
transform中的translate获取的是相对于元素本身的宽和高。

垂直居中

和水平居中一样，这里要讲垂直居中，首先设定两个条件即父元素是盒子容器且高度已经设定

• 子元素是行内元素，高度是由其内容撑开的

这种情况下，需要通过设定父元素的line-height为其高度来使得子元素垂直居中

html代码

<div class="wrap line-height">
    <span class="span">111111</span>
</div>

css代码

 .wrap{
            width:200px ;
            height: 300px;
            border: 2px solid #ccc;
            box-sizing: border-box;
        }
        .span{
            background: red;
        }
        .line-height{
            line-height: 300px;
        }

• 子元素是块级元素但是子元素高度没有设定
  在这种情况下实际上是不知道子元素的高度的，无法通过计算得到padding或margin来调整
  • 通过给父元素设定display:table-cell;vertical-align:middle

html代码

<div class="wrap table-cell">
    <div class="non-height ">11111</div>
</div>

css代码

  .table-cell{
            display: table-cell;
            vertical-align: middle;
        }
 .non-height{
            background: green;
        }
.wrap{
            width:200px ;
            height: 300px;
            border: 2px solid #ccc;
            box-sizing: border-box;
        }

• flexbox

html代码

<div class="wrap flex">
    <div class="non-height ">1111</div>
</div>

css代码

.wrap{
            width:200px ;
            height: 300px;
            border: 2px solid #ccc;
            box-sizing: border-box;
        }
.non-height{
            background: green;
        }
 .flex{
            display: flex;
            align-items: center;
        }

• 子元素是块级元素且高度已经设定

• 利用绝对定位，让子元素相对于父元素绝对定位

html代码

<div class="wrap  relative">
    <div class="div1 absolute">111111</div>
</div>

css代码

 .relative{
            position: relative;
        }
        .absolute{
            position: absolute;
            top:50%;
            margin-top: -50px;
        }
.wrap{
            width:200px ;
            height: 300px;
            border: 2px solid #ccc;
            box-sizing: border-box;
        }
.div1{
            width:100px ;
            height: 100px;
            box-sizing: border-box;
            background: darkblue;
        }

• 利用flexbox

html代码

<div class="wrap  flex">
    <div class="div1 ">111111</div>
</div>

css代码

.flex{
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
.wrap{
            width:200px ;
            height: 300px;
            border: 2px solid #ccc;
            box-sizing: border-box;
        }
.div1{
            width:100px ;
            height: 100px;
            box-sizing: border-box;
            background: darkblue;
        }

• 利用translateY偏移

 #outer{  
                height: 300px;  
                width: 300px;  
                border:1px solid red;  
                position: relative;  
            }  
            #myDiv2{  
                height: 100px;  
                width: 100px;  
                background: yellow;  
                position: absolute;  
                top: 50%;  
                transform:translateY(-50%);  

总结

• 水平垂直居中：已知高度和宽度的元素解决方案1
  这是一种不常见的居中方法，可自适应，比方案2更智能，如下：

.item{
    position: absolute;
    margin:auto;
    left:0;
    top:0;
    right:0;
    bottom:0;
}

• 水平垂直居中：已知高度和宽度的元素解决方案2

.item{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px;  /* 设置margin-left / margin-top 为自身高度的一半 */
    margin-left: -75px;
}

• 水平垂直居中：已知高度和宽度的元素解决方案3：table-cell

div{
    border: 3px solid #555;
    width: 300px;
    height: 200px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
span{
    vertical-align: middle;
}

• 水平垂直居中：未知高度和宽度元素解决方案

.item{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
}

• 水平垂直居中：使用flex布局实现

.parent{
    display: flex;
    justify-content:center;
    align-items: center;
    /* 注意这里需要设置高度来查看垂直居中效果 */
    background: #AAA;
    height: 300px;
}

• 水平垂直居中：使用Css3的transform布局实现

#container{
    position:relative;
}

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

注意：
CSS3的transform和flex固然好用，但在项目的实际运用中必须考虑兼容问题，大量的hack代码可能会导致得不偿失。