垂直居中(總結)

由于我們在布局中經常會用到垂直居中塊級元素或者行內元素，在這里小編來做一個總結，

塊級元素水平居中：

方法一：
直接給子元素添加樣式：margin: 0 auto;

 .father {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        
        .son {
            width: 150px;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }
 <div class="father">
        <div class="son">

        </div>
 </div>

效果：

方法二：
利用絕對定位讓子元素先右移50%,由于子元素有自己的寬度，導致子元素并沒有達到居中效果這時我們需要借助樣式 transform: translateX(-50%);讓子元素在向左移動自身的一半，這樣就達到了居中效果，
注意 ！！ 不要忘記子絕父相，
（萬能居中方法，不管是行內塊元素，行內元素，還是塊級元素都可以達到居中效果） 因為當使用絕對定位后將行內塊元素和行內元素都轉換成為了塊級元素！

.father {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        
        .son {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 150px;
            height: 150px;
            background-color: pink;
        }
<div class="father">
        <div class="son">

        </div>
    </div>

效果：

方法三：
利用彈性布局讓主軸元素直接居中的樣式，但是由于有瀏覽器兼容問題，建議在移動端使用，

.father {
            display: flex;
            justify-content: center;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        
        .son {
            width: 150px;
            height: 150px;
            background-color: pink;
        }
<div class="father">
        <div class="son">

        </div>
    </div>

效果：

行內元素水平居中：

方法一：
直接給行內元素父元素添加樣式：text-align: center;，可以使父元素里面的行內元素全部居中 （包括行內塊元素）

.father {
            width: 200px;
            height: 200px;
            background-color: red;
            text-align: center;
        }
        
        .son {
            background-color: pink;
        }
<div class="father">
        <span class="son">
            Hello word!
        </span>
    </div>
</body>

效果：

塊級元素豎直居中：

方法一：
利用彈性布局讓主軸元素直接居中的樣式，建議在移動端使用，(原理和水平居中一樣)

.father {
            display: flex;
            align-items: center;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        
        .son {
            width: 150px;
            height: 150px;
            background-color: pink;
        }
<div class="father">
        <div class="son"></div>
    </div>

效果：

方法二：
利用絕對定位讓子元素先向下移50%,由于子元素有自己的寬度，導致子元素并沒有達到居中效果這時我們需要借助樣式 transform: translateY(-50%);讓子元素在向上移動自身的一半，這樣就達到了居中效果，
注意 ！！ 不要忘記子絕父相，

.father {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        
        .son {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 150px;
            height: 150px;
            background-color: pink;
        }
<div class="father">
        <div class="son">

        </div>
    </div>

效果：

行內元素豎直居中：

方法一：
直接給行內元素父元素添加樣式：line-height: 200px;

.father {
            width: 200px;
            height: 200px;
            background-color: red;
            line-height: 200px;
        }
        
        .son {
            width: 150px;
            height: 150px;
            background-color: pink;
        }
<div class="father">
        <span class="son">
            hello Word!
        </span>
    </div>

效果：

塊級元素垂直居中：

方法一：
利用flex布局，將豎直居中和水平居中結合起來使用，

.father {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        
        .son {
            width: 150px;
            height: 150px;
            background-color: pink;
        }
<div class="father">
        <div class="son">
        </div>
    </div> 

效果：

方法二：
利用定位，將盒子垂直居中起來，

.father {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        
        .son {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 150px;
            height: 150px;
            background-color: pink;
        }

效果：

行內元素垂直居中：

方法一：
將行高和文本居中結合起來使用

.father {
            width: 200px;
            height: 200px;
            background-color: red;
            text-align: center;
            line-height: 200px;
        }
        
        .son {
            background-color: pink;
        }
<div class="father">
        <span class="son">
            hello World!
        </span>
    </div>

效果：