CSS【詳解】居中對齊（水平居中 vs 垂直居中）

水平居中

內部塊級元素的寬度要小于容器(父元素)

方案一：文本居中對齊（內聯元素）

限制條件：僅用于內聯元素 display:inline 和 display: inline-block;

給容器添加樣式

text-align:center

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px 30px 0px 300px;border: 1px solid gray;text-align: center;}.item {display: inline-block;width: 400px;background: yellow;}</style></head><body><div class="box"><span>水平居中 -- display: inline</span></div><div class="box"><div class="item">水平居中 -- display: inline-block</div></div></body>
</html>

方案二：自動外邊距（塊級元素）

限制條件：僅用于塊級元素 display:block;

給內部元素添加樣式

margin: auto

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px;border: 1px solid gray;}.item {margin: auto;width: 300px;background: yellow;}</style></head><body><div class="box"><div class="item">水平居中 -- 塊級元素 display:block</div></div></body>
</html>

方案三：flex布局【推薦】

給容器添加樣式

display: flex;
justify-content: center;

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px 30px 0px 300px;border: 1px solid gray;display: flex;justify-content: center;}.item {width: 400px;background: yellow;}</style></head><body><div class="box"><span>水平居中 -- flex布局 display: inline</span></div><div class="box"><div class="item">水平居中 -- flex布局 display: block</div></div></body>
</html>

方案四：子絕父相 + transform （CSS3）

限制條件：瀏覽器需支持CSS3，比較老的瀏覽器不適用
給容器（父元素）添加樣式

position: relative

給內部元素添加樣式

position: absolute;
left: 50%;
transform: translate(-50%, 0);

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px 30px 0px 300px;border: 1px solid gray;height: 50px;position: relative;}.item {background-color: yellow;position: absolute;left: 50%;transform: translate(-50%, 0);}</style></head><body><div class="box"><span class="item">水平居中 -- 子絕父相 + transform</span></div></body>
</html>

方案五：子絕父相 + 自動外邊距（指定寬度）

限制條件：內部元素需限定寬度

給容器（父元素）添加樣式

position: relative

給內部元素添加樣式

position: absolute;
left: 0;
right: 0;
margin: auto;

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px 30px 0px 300px;border: 1px solid gray;height: 50px;position: relative;}.item {background-color: yellow;position: absolute;left: 0;right: 0;margin: auto;width: 300px;}</style></head><body><div class="box"><span class="item">水平居中 -- 子絕父相 + 自動外邊距</span></div></body>
</html>

方案六：子絕父相 + 負外邊距（知道寬度 + 寬度計算）

限制條件：需知道內部元素的寬度（無法預知寬度的內聯元素和未知寬度的塊級元素都不適用）

給容器（父元素）添加樣式

position: relative

給內部元素添加樣式

position: absolute;
left:50%;
margin-left:-內部元素寬度的一半

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px;border: 1px solid gray;height: 100px;position: relative;}.item {width: 400px;background: yellow;position: absolute;left: 50%;margin-left: -200px;}</style></head><body><div class="box"><div class="item">水平居中 -- 絕對定位元素 position:absolute</div></div></body>
</html>

垂直居中

內部塊級元素的高度要小于容器(父元素)

方案一：行高 = 容器高度（單行內聯元素）

限制條件：僅用于單行內聯元素 display:inline 和 display: inline-block;

給容器添加樣式

 height: 100px;line-height: 100px;

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px;border: 1px solid gray;height: 100px;line-height: 100px;}</style></head><body><div class="box"><span class="item">垂直居中 -- 內聯元素 display:inline</span></div></body>
</html>

方案二：flex布局【推薦】

給容器添加樣式

display: flex;
align-items: center;

方案三：子絕父相 + transform（CSS3）

限制條件：瀏覽器需支持CSS3，比較老的瀏覽器不適用
給容器（父元素）添加樣式

position: relative

給內部元素添加樣式

position: absolute;
top: 50%;
transform: translate(0, -50%);

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px;border: 1px solid gray;height: 100px;position: relative;}.item {position: absolute;top: 50%;transform: translate(0, -50%);background-color: yellow;}</style></head><body><div class="box"><div class="item">垂直居中 -- 子絕父相 transform</div></div></body>
</html>

方案四：子絕父相 + 自動外邊距（指定高度）

限制條件：內部元素需限定高度

給容器（父元素）添加樣式

position: relative

給內部元素添加樣式

position: absolute;
top: 0;
bottom: 0;
margin: auto;

內聯元素也有效，因為內聯元素絕對定位后，display 會變為 block

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px;border: 1px solid gray;height: 100px;position: relative;}.item {position: absolute;top: 0;bottom: 0;margin: auto;background-color: yellow;height: 50px;}</style></head><body><div class="box"><span class="item">垂直居中 -- 子絕父相 + 自動外邊距</span></div></body>
</html>

方案五：子絕父相 + 負外邊距（知道高度 + 高度計算）

限制條件：需知道內部元素的高度

給容器（父元素）添加樣式

position: relative

給內部元素添加樣式

position: absolute;
top: 50%;
margin-top: -內部元素高度的一半;

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px;border: 1px solid gray;height: 100px;position: relative;}.item {position: absolute;top: 50%;margin-top: -25px;height: 50px;background-color: yellow;}</style></head><body><div class="box"><span class="item">垂直居中 -- 子絕父相 + 負外邊距</span></div></body>
</html>

水平垂直居中

參考上文分別實現水平居中和垂直居中即可，常用方案如下：

方案一：flex布局【推薦】

給容器添加樣式

display: flex;
justify-content: center;
align-items: center;

方案二：子絕父相 + transform （CSS3）

限制條件：瀏覽器需支持CSS3，比較老的瀏覽器不適用
給容器（父元素）添加樣式

position: relative

給內部元素添加樣式

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

方案三：子絕父相 + 自動外邊距（指定高度和寬度）

給容器（父元素）添加樣式

position: relative

給內部元素添加樣式

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

方案四：子絕父相 + 負外邊距（知道寬度和高度 + 寬度和高度計算）

限制條件：需知道內部元素的寬度和高度
給容器（父元素）添加樣式

position: relative

給內部元素添加樣式

position: absolute;
left:50%;
margin-left:-內部元素寬度的一半;
top: 50%;
margin-top: -內部元素高度的一半;

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px 30px 0px 300px;border: 1px solid gray;height: 100px;position: relative;}.item {background-color: yellow;position: absolute;left: 50%;margin-left: -150px;top: 50%;margin-top: -25px;width: 300px;height: 50px;}</style></head><body><div class="box"><span class="item">水平垂直居中 -- 子絕父相 + 負外邊距</span></div></body>
</html>