CSS水平垂直居中常見方法總結

一、元素水平居中

固然最好使的是：

margin: 0 auto;

居中很差使的緣由：
一、元素沒有設置寬度，沒有寬度怎麼居中嘛！
二、設置了寬度依然很差使，你設置的是行內元素吧，行內元素和塊元素的區別以及如何將行內元素轉換爲塊元素請看個人另外一篇文章！
示例 1：

<div class="box">
    <div class="content">
        哇！居中了
    </div>
</div>

<style type="text/css">
.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
  margin: 0 auto;
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
  line-height: 100px;//文字在塊內垂直居中
    text-align: center;//文字居中
    margin: 0 auto;
}
</style>

2、元素水平垂直居中

方案1：position 元素已知寬度 
父元素設置爲：position: relative; 
子元素設置爲：position: absolute; 
距上50%，據左50%，而後減去元素自身寬度的距離就能夠實現 

<div class="box">
    <div class="content">
    </div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
   position: relative;
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
   position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -50px;
}

方案2：position transform 元素未知寬度 
若是元素未知寬度，只需將上面例子中的margin: -50px 0 0 -50px;替換爲：transform: translate(-50%,-50%); 
效果如上！ 
示例 3：

 

<div class="box">
    <div class="content">
    </div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    position: relative;
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

 

 

方案3：flex佈局 :父元素加

1. display: flex;
2. justify-content: center;
3. align-items: center;

 

<div class="box">
    <div class="content">
    </div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    display: flex;　　　　　　　　//flex佈局
    justify-content: center;　　//使子項目水平居中
    align-items: center;　　　　//使子項目垂直居中
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
}

　

 

方案4：table-cell佈局 
示例 5： 
由於table-cell至關與表格的td，td爲行內元素，沒法設置寬和高，因此嵌套一層，嵌套一層必須設置display: inline-block;td的背景覆蓋了橘黃色，不推薦使用

 

 

<div class="box">
    <div class="content">
        <div class="inner">
        </div>
    </div>
</div>

.box {
    background-color: #FF8C00;//橘黃色
    width: 300px;
    height: 300px;
    display: table;
}
.content {
    background-color: #F00;//紅色
    display: table-cell;
    vertical-align: middle;//使子元素垂直居中
    text-align: center;//使子元素水平居中
}
.inner {
    background-color: #000;//黑色
    display: inline-block;
    width: 20%;
    height: 20%;
}