CSS居中方法大全

CSS · 發表 2018-12-05 10:28:13

摘要：在塊級父元素中讓內聯元素居中。塊級元素多個塊級元素如果要讓多個塊級元素在同一水平線上居中，那麼可以修改它們的 display 值。這裡有兩個示例，其中一個使用了 inline-block 的顯示...

在塊級父元素中讓內聯元素居中。

塊級元素

多個塊級元素

如果要讓多個塊級元素在同一水平線上居中，那麼可以修改它們的 display 值。這裡有兩個示例，其中一個使用了 inline-block 的顯示方式，另一個使用了 flexbox 的顯示方式。 HTML：

<main class="inline-block-center">
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
</main>

<main class="flex-center">
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
</main>
複製程式碼

CSS:

body {
background: #f06d06;
font-size: 80%;
}

main {
background: white;
margin: 20px 0;
padding: 10px;
}

main div {
background: black;
color: white;
padding: 15px;
max-width: 125px;
margin: 5px;
}

.inline-block-center {
text-align: center;
}
.inline-block-center div {
display: inline-block;
text-align: left;
}

.flex-center {
display: flex;
justify-content: center;
}
複製程式碼

如果你想讓多個垂直堆疊的塊元素，那麼仍然可以通過設定 margin-left 和 margin-right 為 auto 來實現。 HTML:

<main>
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
</main>
複製程式碼

CSS:

body {
background: #f06d06;
font-size: 80%;
}

main {
background: white;
margin: 20px 0;
padding: 10px;
}

main div {
background: black;
margin: 0 auto;
color: white;
padding: 15px;
margin: 5px auto;
}

main div:nth-child(1) {
width: 200px;
}
main div:nth-child(2) {
width: 400px;
}
main div:nth-child(3) {
width: 125px;
}
複製程式碼

垂直居中

內聯或類內聯元素（譬如文字或連結）

單行

只需新增等值的 padding-top 和 padding-bottom

就可以實現垂直居中。

如果不能使用 padding 屬性來實現垂直居中，而且已知文字不會換行，那麼就可以讓 line-height 和 height 相等，從而實現垂直居中。

多行

對於多行文字，同樣可以使用等值 padding-top 和 padding-bottom 的方式實現垂直居中。如果你在使用過程中發現這種方法沒見效，那麼你可以通過 CSS 為文字設定一個類似 table-cell 的父級容器，然後使用 vertical-align 屬性實現垂直居中。 HTML:

<table>
<tr>
<td>
I'm vertically centered multiple lines of text in a real table cell.
</td>
</tr>
</table>

<div class="center-table">
<p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
</div>
複製程式碼

CSS:

body {
background: #f06d06;
font-size: 80%;
}

table {
background: white;
width: 240px;
border-collapse: separate;
margin: 20px;
height: 250px;
}

table td {
background: black;
color: white;
padding: 20px;
border: 10px solid white;
/* default is vertical-align: middle; */
}

.center-table {
display: table;
height: 250px;
background: white;
width: 240px;
margin: 20px;
}
.center-table p {
display: table-cell;
margin: 0;
background: black;
color: white;
padding: 20px;
border: 10px solid white;
vertical-align: middle;
}
複製程式碼

還可以使用 flexbox 實現垂直居中，對於父級容器為 display: flex 的元素來說，它的每一個子元素都是垂直居中的。

上述方法只適用於父級容器擁有確定高度的元素。如果上述方法都不起作用，那麼你就需要使用被稱為幽靈元素（ghost element）的解決方式：在垂直居中的元素上新增偽元素，設定偽元素的高等於父級容器的高，然後為文字新增 vertical-align: middle; 樣式，即可實現垂直居中。

HTML:

<div class="ghost-center">
<p>I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p>
</div>
複製程式碼

CSS:

body {
background: #f06d06;
font-size: 80%;
}

div {
background: white;
width: 240px;
height: 200px;
margin: 20px;
color: white;
resize: vertical;
overflow: auto;
padding: 20px;
}

.ghost-center {
position: relative;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align: middle;
width: 190px;
margin: 0;
padding: 20px;
background: black;
}
複製程式碼

塊級元素

已知元素高度

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}
複製程式碼