內容首發于工粽號：程序員大澈，每日分享一段優質代碼片段，歡迎關注和投稿！

大家好，我是大澈！

本文約 500+ 字，整篇閱讀約需 1 分鐘。

今天分享一段優質 CSS 代碼片段，可以輕松實現元素垂直水平居中對齊。

老規矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評論區留下你的見解！

div {
  display: grid;
  place-content: center;
}

分享原因

這段代碼展示了如何使用 CSS Grid 布局以及 place-content 屬性來居中對齊元素。

CSS Grid 是一種強大的布局工具，提供了簡單且靈活的方式來實現復雜的布局，而place-content 屬性進一步簡化了居中對齊的實現。

相較于 Flex 布局，Grid 布局僅僅只需一行代碼即可搞定居中對齊！

代碼解析

1. display: grid;

設置元素為網格容器。

網格容器可以通過定義網格行和列來布置其子元素。

2. place-content: center;

place-content 是 align-content 和 justify-content 的組合屬性。

center 值表示內容在容器的中央對齊。

3. 兼容性

place-content: center; 的兼容性在現代瀏覽器中較好，某一些舊版瀏覽器的不兼容完全可以忽略了。

以下是一些常見瀏覽器的具體支持情況：

ul li 橫排居中排列的方法

無序列表的列表項默認情況下是豎著排的，因為li元素是塊級元素，會自動分行。那如果要將列表的列表項進行橫排，比用無序列表ul元素定義一個導航條。那該怎么辦呢？這當中有三個應當被解決的東西，一個是橫排本身，另一個就是應當把無序列表項的圓點去掉，第三則是讓ul定義的列表居中顯示，包括水平居中和垂直居中。方法如下：

ul li橫排的方法

將ul無序列表元素中的列表項li元素的display屬性設置成inline或inline-block，個人比較常用的是后者：

ul li{display:inline-block;}

ul水平居中和垂直居中的方法

水平居中方法：只要將ul元素包含于一個div元素，并將div元素的text-align屬性設置為center即可將ul水平居中。除此之外，因為ul的列表默認情況下是有左內邊距的，所以，為了能夠讓列表能夠更好地水平居中，需要將ul的左內邊距padding-left設置為0，具體可見下方的綜合實例。

垂直居中方法：為包含ul元素的div元素設置寬度width和高度height（實際上導航條一般也需要有寬度和高度的設置），然后將ul的line-height屬性設置為父元素的高度height即可。

去掉圓點的方法

將ul元素的list-style屬性設置為none即可。

ul li 橫排居中排列綜合實例代碼，及在線編輯器

<div class='e1'>
  <ul class='e2'>
    <li>HTML</li>
    <li>python</li>
    <li>golang</li>
  </ul>
</div>

<style>
  .e1{width:100%;height:50px;border:1px solid skyblue;text-align:center;}
  .e2{list-style:none;padding-left:0%;}
  .e2 li{line-height:50px;display:inline-block;}
</style>

HTML+CSS+JS實例在線編輯器：

HTML ul li 橫排居中排列的方法，綜合實例在線 - HTML教程

實例代碼解析

如上代碼，一定要將ul的左內邊距padding-left設置為0，否則ul列表的“水平居中”將偏向右邊，大家可以將.e2中的padding-left刪除掉，然后再在線運行看一看效果。

python全棧：

笨鳥工具-璞玉天成，大器晚成

<div id="parent">
<!-- 定義子級元素 -->
<div id="child">居中布局</div>
</div>

過以下CSS樣式代碼實現水平方向居中布局效果

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

優點:

瀏覽器兼容性比較好

缺點:

text-align 屬性具有繼承性, 導致子級元素的文本也是居中顯示的