CSS居中完全指南

qujian 發(fā)布于2019-08-30 12:47 / 2808人閱讀

摘要：原載于，本文著重提取文中的方法，不完全翻譯。人們經(jīng)常抱怨在中居中元素的問題，其實(shí)這個(gè)問題其實(shí)并不復(fù)雜，只是因?yàn)榉椒ū姸?，需要根?jù)情況從眾多方法中選取一個(gè)出來。

原載于CSS-Trick，本文著重提取文中的方法，不完全翻譯。如有需要，直接原文查看。

人們經(jīng)常抱怨在CSS中居中元素的問題，其實(shí)這個(gè)問題其實(shí)并不復(fù)雜，只是因?yàn)榉椒ū姸?，需要根?jù)情況從眾多方法中選取一個(gè)出來。接下來，我們做一個(gè)‘決定樹’來幫我們把問題變的簡(jiǎn)單一點(diǎn)。首先你需要居中：

水平

需要居中 inline 或者 inline-* 元素（如文字或者鏈接）？

需要居中 block 類的元素？

需要居中多個(gè) block 元素？

垂直

需要居中 inline 或者 inline-* 元素（如文字或者鏈接）？

需要居中 block 類的元素？

既水平又垂直

固定寬高

不固定寬高

使用 flexbox

水平居中 水平居中 inline 或者 inline-* 元素

你可以輕松的在一個(gè) block 元素中水平居中一個(gè) inline 元素，以下代碼對(duì) inline，inline-block，inline-table 和 inline-flex 等有效

.parent {
  text-align: center;
}

水平居中 block 類的元素

在 block 元素被設(shè)定固定寬度的情況下，可以使用設(shè)置元素 margin-left 和 margin-right 的值為 auto 的方法實(shí)現(xiàn)水平居中。

.child {
  width: 400px;
  margin: 0 auto;
}

水平居中多個(gè) block 類的元素

通過 inline-block實(shí)現(xiàn)

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

通過 flexbox 實(shí)現(xiàn)

.parent {
  display: flex;
  justify-content: center;
}

垂直居中 垂直居中 inline 或者 inline-* 元素 單行

inline/text 元素可以簡(jiǎn)單的用設(shè)置相同的上下 padding 值達(dá)到垂直居中的目的。

.center {
  pading-top: 30px;
  padding-bottom: 30px;
}

如果因?yàn)槟撤N原因不能使用 padding 的方法，你還可以設(shè)置 line-height 等于 height來達(dá)到目的。

.center {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

多行

相同的上下 padding 也可以適用于此種情況，如果不能生效，你可以嘗試將該元素的父元素的 dispaly 設(shè)置為 table ，同時(shí)該元素的 dispaly 設(shè)置為 table-cell，然后設(shè)置 vertical-align。

.parent {
  display: table;
  width: 200px;
  height: 400px;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

如果上述方法不能使用，你可以嘗試使用 flexbox,一個(gè)多帶帶的 flexbox 子元素可以輕易的在其父元素中居中。謹(jǐn)記，這種方法需要父元素有固定的高度。

.parent {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

如果上述兩種方式均不能使用，你可以使用“幽靈元素”技術(shù)，這種方法采用偽元素 ::before 撐開高度，文字垂直居中。

.parent {
  position: relative;
}
.parent::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.child {
  display: inline-block;
  vertical-align: middle;
}

垂直居中 block 類的元素 已知元素高度

.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; */
}

未知元素高度

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

使用 flexbox

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

既水平又垂直 固定寬高

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

不固定寬高

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用 flexbox

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/115065.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

qujian

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 2401·2023-04-26 00:28
FE.CSS-理解Matrix,Flex,Grid

閱讀 3130·2019-08-30 15:55
CSS居中完全指南

閱讀 2809·2019-08-30 12:47
CSS去掉點(diǎn)擊后出現(xiàn)的邊框

閱讀 1622·2019-08-29 11:04
[ 好文分享 ] CSS布局終極方案之--圣杯布局（兼容IE6+，現(xiàn)代瀏覽器）

閱讀 3319·2019-08-28 18:14
關(guān)于CSS Reset 那些事（二）之 Normalize.css 源碼解讀

閱讀 1025·2019-08-28 18:11
highcharts大數(shù)據(jù)顯示

閱讀 1726·2019-08-26 18:36
React+Node+Express搭建一個(gè)前后端demo

閱讀 3446·2019-08-23 18:21

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

CSS居中完全指南

相關(guān)文章