用CSS/CSS3 实现水平居中和垂直居中，水平垂直居中的方式

一.水平居中

（1）行内元素解决方案：父为块元素+text-align: center

只需要把行内元素包裹在一个属性display为block的父层元素中，并且把父层元素添加如下属性即可：

使用text-align: center;居中

对于行内元素或具有inline-block属性的元素居中，比如span、img等可以使用text-align: center;来实现。

<style type="text/css">
            div.parent{
                border: 1px solid red;
                text-align: center;
            }
            
            div span {
                width: 100px;
                background: #ddd;
            }
        </style>
    -----------------------------------    
        
        <div class="parent">
            <span>行内元素居中</span>
            <span>行内元素居中</span>
            <span>行内元素居中</span>
        </div>

 

（2）单个块状元素解决方案

父层元素使用text-align: center居中,子层元素使用 margin: 10px auto; 10px可改变，以设置顶端外边距；

<style type="text/css">
            div.parent {
                border: 1px solid red;
                text-align: center;
            }
            
            div p{
            width: 100px;
            background: #ddd;
            /* 这里可以设置顶端外边距 */
            margin: 10px auto;
            }
        </style>

        -----
        <div class="parent">
            <p>块元素居中</p>
        </div>    

 

（3）多个块状元素解决方案

将元素的display属性设置为inline-block，并且把父元素设置text-align：center即可:

<style type="text/css">
            div.parent {
                border: 1px solid red;
                text-align: center;
            }
            
            div p{
           display: inline-block;
            width: 100px;
            background: #ddd;
             }
        </style>
        
    <div class="parent">
            <p>块元素居中</p>
            <p>块元素居中</p>
            <p>块元素居中</p>
        </div>    

（4）多个块状元素解决方案 (使用flexbox布局实现)

使用flexbox布局，只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可:

   <style>
            div {
                border: 1px solid red;
                width: 200px;
                height: 200px;
                
                /*flex*/
                display: flex;
                justify-content: center;/*水平居中*/
                align-items: center;/*垂直居中*/
            }
            div span{
            
                background: #808080;
                
            }
        </style>
        
        
        
        <div>
            <span>我是span元素</span>
        </div>        

二、垂直居中

（1）单行的行内元素解决方案 ：行内元素的height和line-height设置的和父元素一样高度即可实现垂直居中

 

div.parent {
    background: #222;
    height: 200px;
}


/* 以下代码中，将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */


a {
    height: 200px;
    line-height:200px; 
    color: #FFF;
}

--------------------

       <div class="parent"> 
            <a>我是a元素</a>
        </div>

（2）多行的行内元素解决方案

组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果，如下：

<style type="text/css">
            div.center-aligned {
            border:1px solid red;
             width: 200px;
              height: 200px;
              display: table;/*父容器使用display：table*/
            }
            div.center-core{
                display: table-cell;/*包裹行内元素容器使用display：table-cell*/
                text-align: center;/*水平居中*/
                vertical-align: middle;/*垂直居中*/
            }
            span{
            
            background: #ddd;
}
        </style>

-----------
        <div class="center-aligned">
            <div class="center-core">
                <span>我是span元素</span>
                <span>我是span元素</span>
            </div>
        </div>

        

 

（3）已知高度的块状元素解决方案:负margin和定位配合

好处是行内元素和块级元素都适用,但是需要知道元素本身的宽高度。

  <style>
            div {
                border: 1px solid red;
                width: 200px;
                height: 200px;
                text-align: center;
                position: relative;
            }
            
            div span {
                width: 150px;
                height: 50px;
                background: #808080;
                position: absolute;
                margin: auto;
                left: 50%;
                top: 50%;
                margin-left: -75px;/*-自身width/2*/
                margin-top: -25px;/*-自身height/2*/
            }
        </style>  
        
        
        
    ------------    
        
        
        <div>
            <span>我是span元素</span>
        </div>
        

三.水平垂直居中

（1）已知高度和宽度的元素解决方案1：margin-auto和定位的组合使用

这是一种不常见的居中方法，可自适应，比方案2更智能，如下：

<style>
            div {
                border: 1px solid red;
                width: 200px;
                height: 200px;
                position: relative;
            }
            
            div span {
                width: 150px;
                height: 50px;
                background: #808080;
                position: absolute;
                margin: auto;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
            }
        </style>
        
        
        ---------------
        
        <div>
            <span>我是span元素</span>
        </div>

（2）已知高度和宽度的元素解决方案2：负margin和定位配合

position 元素已知宽度 父元素设置为：position: relative; 子元素设置为：position: absolute; 距上50%，据左50% ；margin-left: -自身width/2margin-top: -自身height/2

<style>
            div {
                border: 1px solid red;
                width: 200px;
                height: 200px;
                text-align: center;
                position: relative;
            }
            
            div span {
                width: 150px;
                height: 50px;
                background: #808080;
                position: absolute;
                margin: auto;
                left: 50%;
                top: 50%;
                margin-left: -75px;/*-自身width/2*/
                margin-top: -25px;/*-自身height/2*/
            }
        </style>  
        
        
        
    ------------    
        
        
        <div>
            <span>我是span元素</span>
        </div>

（3）未知高度和宽度元素解决方案：使用translate居中

 

这种方法实现原理和负margin和定位的组合使用是一样的， 就是用css3的属性translate来达到和负margin一样的作用。translate是transform的一个值，在这里作用是定义2D转换。但是在IE9以下不支持

<style type="text/css">
            div {
                border: 1px solid red;
                width: 200px;
                height: 200px;
                position: relative;
            }
            
            div span {
                width: 150px;
                height: 50px;
                background: #ddd;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
        </style>
        
        ---------------
        <div>
            <span>行内元素居中</span>
        </div>

（4）使用flex布局实现：使用flex居中不需要知道元素本身宽高以及元素的属性

<style>
            div {
                border: 1px solid red;
                width: 200px;
                  /* 注意这里需要设置高度来查看垂直居中效果 */
                height: 200px;
                
                /*flex*/
                display: flex;
                justify-content: center;/*水平居中*/
                align-items: center;/*垂直居中*/
            }
            div span{
            
                background: #808080;
                
            }
        </style>
        
        
        -----
        <div>
            <span>我是span元素</span>
        </div>

 

（5）calc和定位的组合使用

calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。calc使元素居中的原理和负margin是一样的，calc 允许基于当前的页面布局计算尺寸。

计算公式为：

top: calc(50% - (自身高度height/ 2));

left: calc(50% - (自身高度宽度 / 2));

<style type="text/css">
                div {
                border: 1px solid red;
                width: 200px;
                height: 200px;
                position: relative;
            }
            
            div span {
                width: 150px;
                height: 50px;
                background: #ddd;
                position: absolute;
                top: calc(50% - (50px / 2));
                left: calc(50% - (150px / 2));
        </style>
        
        
        
        --
        
        <div>
            <span>行内元素居中</span>
        </div>