前端 樣式 水平垂直居中

水平居中

水平居中這個問題首先要搞清楚存在兩個條件才能夠稱之爲水平居中，即父元素必須是塊級盒子容器，父元素寬度必須已經被設定好，下面對子元素的不同情況進行討論：

• 子元素爲行內元素，寬度是由其內容撐開的
  這種情況下解決方案是給父元素設定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代碼可能會導致得不償失。