編輯排版 | 宋大獅

平台營運 | 小唐獅

ONE 問題描述

2023年5月6号記，久違了大家。

今天要和大家分享的是關于如何實作元素的垂直水準居中。

最近在整理有關CSS的公司真實面試題，但因為五一假期的原因，進度一直被延誤。今天，分享一下整理的成果之一，關于項目中常用的，元素垂直水準居中的實作方式。

具體的需求：按元素分類列舉、把常用和不常用的實作方式分開、盡量全面。

具體的問題：1、元素分類有哪些；2、每種元素如何實作，哪些實作方式又是最常用的、最好用的。

今天，我們就在這篇文章，用最簡潔的語言，來好好地理理上述問題。

TWO 問題解決

一、代碼總覽

最好用的元素垂直水準居中的代碼如下，複制即可直接使用！

【最好用的垂直居中方式】
1、兩行代碼實作。将父元素設定為 Flex 布局，再給要居中的子元素添加margin：auto。
2、對于 行元素、行塊元素、塊元素 都适用。

<body>
<div class="fatherDiv">
<div class="sonDiv">哈哈哈哈</span>
</div>
</body>

<style>
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

display: flex;
}

/* 子元素 */
.sonDiv {
background-color: pink;

margin: auto;
}
</style>

二、問題解析

1、問：元素分類有哪些？

答：

塊元素，display: block; ，自己獨占一行，并且可以設定寬高；

行塊元素，display: inline-block; ，在同一行顯示，并且可以設定寬高；

行元素，display: inline; ，在同一行顯示，并且不可以設定寬高。

2、問：每種元素如何實作，哪些實作方式又是最常用的、最好用的？

答：

行元素：

1、text-align + line-height

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

text-align: center;
line-height: 500px;
}

/* 子元素 */
.sonDiv {
background-color: pink;
display: inline;
}

2、display: table-cell;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

display: table-cell;
text-align: center;
vertical-align: middle;
}

/* 子元素 */
.sonDiv {
background-color: pink;
display: inline;
}

3、display: flex;【好用】

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

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

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
}

4、display: flex;【好用】

/* 父元素 */
        .fatherDiv {
            width: 500px;
            height: 500px;
            background-color: green;

            display: flex;
        }

        /* 子元素 */
        .sonDiv {
            width: 200px;
            height: 200px;
            background-color: pink;
            display: inline;            margin: auto;
        }

5、position: absolute;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

position: relative;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;

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

6、position: absolute;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

position: relative;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;

position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}

7、position: absolute;【好用】

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

position: relative;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;

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

8、display: grid;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

display: grid;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;

margin: auto;
}

9、display: grid;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

display: grid;
justify-content: center;
align-items: center;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
}

行塊元素：

1、text-align + line-height + vertical-align

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

text-align: center;
line-height: 500px;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;

vertical-align: middle;
}

2、display: table-cell;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

display: table-cell;
text-align: center;
vertical-align: middle;
}

/* 子元素 */
.sonDiv {
background-color: pink;
display: inline-block;
}

3、display: flex;【好用】

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

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

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
}

4、display: flex;【好用】

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

display: flex;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
 display: inline-block;
 margin: auto;
}

5、position: absolute;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

position: relative;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;

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

6、position: absolute;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

position: relative;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;

position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}

7、position: absolute;【好用】

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

position: relative;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;

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

8、display: grid;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

display: grid;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;

margin: auto;
}

9、display: grid;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

display: grid;
justify-content: center;
align-items: center;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
}

塊元素：

1、display: table-cell;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

display: table-cell;
vertical-align: middle;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;

margin: auto;
}

2、display: flex;【好用】

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

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

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
}

3、display: flex;【好用】

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

display: flex;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
 display: block;
 margin: auto;
}

4、position: absolute;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

position: relative;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;

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

5、position: absolute;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

position: relative;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;

position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}

6、position: absolute;【好用】

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

position: relative;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;

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

7、display: grid;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

display: grid;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;

margin: auto;
}

8、display: grid;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

display: grid;
justify-content: center;
align-items: center;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
}

- END -

CSS問題：全！如何實作元素的垂直水準居中？

一、代碼總覽

二、問題解析

繼續閱讀

制作一張員工資訊表，了解制表過程與技巧。首先單擊A1單元格，輸入大标題員工資訊表，然後按Enter鍵，可以将選取框切換到下方單

絕對定位元素的水準垂直居中的方法

記一下絕對定位下的各種居中問題（水準居中或垂直居中）

元素水準垂直居中

絕對定位元素的水準和垂直居中

CSS讓子元素快速水準垂直居中的幾種方法

css實作div水準、垂直居中

CSS實作水準居中和垂直居中

css實作水準垂直居中（換行也可行）

【CSS】實作元素水準垂直居中布局（七種方法）

css響應式布局彙總(一)——居中布局一、居中布局的實作(父元素和子元素不定寬高)

如何在 CSS 中設定元件在浏覽器螢幕水準垂直居中

七彩城學電腦，暑假班招生啦。今天上午學的報價單子重新講一遍。·首先要選中序号下面的這一列，在開始這個地方找到編号，找到自

CSS幾種常用水準垂直居中的方法CSS幾種常用居中的方法

幾種CSS實作元素垂直居中的方式

前端 css實作内容居中的N中寫法