八種CSS實現內容居中的方法

作者：佚名 2022-12-20 15:17:29

關于CSS實現內容居中的方式有很多種，在今天這篇文章里，我給大家整理了8種實現內容居中的方式，希望這些方法對你學習和使用CSS進行開發有幫助。

?關于CSS實現內容居中的方式有很多種，在今天這篇文章里，我給大家整理了8種實現內容居中的方式，希望這些方法對你學習和使用CSS進行開發有幫助。

1. Flex

可能是當今最流行和最簡單的居中方式，我可以放心地承認，當我可以使用 text-align: center 代替時，我使用它來對齊段落。

.flexbox-row {
  display: flex;
  flex-direction: row; /* default value */
  justify-content: center; /* x-axis */
  align-items: center; /* y-axis */
}

如果您不知道自己在做什么，Flexbox 可能會有些混亂。基本上 justify-content 跨越 x 軸，align-items 跨越 y 軸。如果將 flex-direction 設置為 column，則軸將反轉。

.flexbox-col {
  display: flex;
  flex-direction: column;
  justify-content: center; /* y-axis */
  align-items: center; /* x-axis */
}

這不是一個 flexbox 的文章，所以，在這里不詳細介紹flexbox。

2. grid

這個也是非常實用的方法。

.grid {
  display: grid;
  place-items: center;
}

3. Flex/Grid + Margin auto

.margins {
  display: flex; /* or grid */
}

.margins p {
  margin: auto;  
}

4. Text align

是的，這真的很容易。

p {
  text-align: center;
}

5.Padding

如果你沒有固定的高度并且想要垂直居中，這可能是最簡單的方法。

p {
  padding: 80px 0;
}

6. Text align + Padding

這個方法的前提是，沒有設置固定高度，在這種場景下，使用這種方法也是非常實用簡單的。

p {
  text-align: center;
  padding: 16px 0;
}

7.Absolute

這個方法也是非常實用的。

.box {
  position: relative;
}

.box p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

8.table

這個table雖然有點過時了，但是在一些表格實現文字內容居中的時候，還是非常實用的。

.table {
  display: table;
}

.table p {
  display: table-cell;
  text-align: center; /* x-axis */
  vertical-align: middle; /* y-axis */
}

寫在最后

以上就是我今天跟你分享的8種CSS實現內容居中的方法，如果你覺得有用的話，請記得點贊我，關注我，并將這篇文章分給你的朋友們，也許能夠幫助到他。?

責任編輯：華軒來源： web前端開發

CSS 開發

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看