文末送 5 本書
水平居中內聯元素要使內聯元素（如連結，span 或img）居中，使用 text-align: center 足夠了。
<div class="desk">
<span class="plate"></span>
</div>.desk {
text-align: center;
}對於多個內聯元素，也可以使用text-align：center:
<div class="desk">
<span class="plate"></span>
<span class="plate"></span>
</div>.desk {
text-align: center;
}
Flexbox使用 flexbox 也可以快速居中元素：
.desk {
display: flex;
justify-content: center;
}對於多個內聯的項目，也可以正常工作：
CSS Grid使用網格容器時，圖中的盤子將根據其網格區域居中。請注意，除非將它們包裹在一個元素中，否則這將不適用於多個盤子。
.desk {
display: grid;
justify-content: center;
}
塊元素Auto Margin寬度和高度已知的塊元素可以通過設置margin-left:auto 和 margin-right:auto 居中元素。
.plate {
width: 120px;
height: 120px;
margin-left: auto;
margin-right: auto;
}對於多個塊元素，它們應該包裝在一個元素中，然後讓這個父元素居中。
.tray {
display: flex;
margin-left: auto;
margin-right: auto;
}
Flexbox對於 flexbox 同樣也是使用 justify-content:center 來居中元素：
.desk {
display: flex;
justify-content: center;
}對於多個元素，我們不需要將它們包裹在一個元素中，flexbox 可以將它們都居中。
CSS定位通過絕對定位，我們可以輕鬆地通過CSS transform將其水平居中。
.plate {
position: absolute;
left: 50%;
transform: translateX(-50%);
}在已知元素寬度的情況下，可以使用負邊距代替CSS transform。
.plate {
position: absolute;
left: 50%;
margin-left: -60px;
}
垂直居中內聯元素Vertical Padding
垂直居中元素最簡單的方法之一是使用padding:
padding-top: 24px;
padding-bottom: 24px;
}
Vertical Alignvertical-align屬性可用於一個或多個元素。
在此示例中，叉子和刀子應與桌子垂直居中。
.desk {
text-align: center;
}
.plate,
.fork,
.knife {
vertical-align: middle;
}
Flexbox為了對齊盤子，叉子和刀，我們可以使用 flexbox:
.desk {
display: flex;
justify-content: center;
align-items: center;
}
塊元素絕對定位通過絕對定位元素，可以使用 CSS transform將元素垂直居中：
.plate {
position: absolute;
top: 50%;
transform: translateY(-50%);
}如果知道元素高度，則可以使用負邊距代替transform。
.plate {
position: absolute;
top: 50%;
margin-top: -60px;
}
CSS Grid使用CSS網格，我們可以使用align-items將項目垂直於其網格區域居中。
.desk {
display: grid;
align-items: center;
}
水平垂直居中內聯元素Padding 和Text Align
.plate {
text-align: center;
padding-top: 24px;
padding-bottom: 24px;
}
其他元素類型絕對定位.plate {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
Flexbox通過 justify-content:center 和 align-items:center 就可以將元素垂直水平居中：
.plate {
display: flex;
justify-content: center;
align-items: center;
}
CSS Grid通過place-items屬性就可以通過，它結合了justify-content和align-items:
.desk {
display: grid;
place-items: center;
}作者：Ahmad Shadeed 譯者：前端小智 來源：ishadeed原文：https://ishadeed.com/article/learn-css-centering/
包郵送書《HTML 5與CSS 3權威指南（第4版·下冊）》
本書是HTML 5與CSS 3領域公認的標杆之作，被讀者譽為「系統學習HTML 5與CSS 3的標準著作」，也是Web前端工程師案頭必備工作手冊。 本書上冊講解HTML 5技術，下冊全面系統地講解了CSS 3相關的各項主要技術，以CSS 3的功能和模塊結構開篇，順序講解了各種選擇器、文字與字體、盒相關樣式、背景與邊框、變形處理、動畫、布局、多媒體，以及CSS 3中的一些其他重要樣式。
福利時間最後，我又來給大家送福利了，這麼好的書不送幾本給大家怎麼行呢？
這次準備了多種方式抽獎，「憑手氣、評論、在看」這三種方式都可以參與！感謝親愛的讀者們，你們的支持也是我持續更文最大的動力。
為了避免中獎後失聯，提前加我微信哈
憑手氣抽獎（3本）參與方式：先掃碼添加小莉的微信（上圖）
回復暗號 666 獲取小程序抽獎碼，掃碼即可參與
開獎時間: 周三(10/14)中午12：00
留言抽獎（1本）在看抽獎（1本）記得先添加我微信，不然我看不到哪些小夥伴點再看
大獎：隨機抽取「1位」在看同學送出一本 HTML5 與CSS3 權威指南（第4版·下冊）