文末送5 本書
水平居中
內聯元素
要使內聯元素（如鍊接，span 或img< /code>）居中，使用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%);
}< br>
在已知元素寬度的情況下，可以使用負邊距代替CSS transform。
.plate {
position: absolute;
left: 50%;
margin-left: -60px;
}
垂直居中
內聯元素
Vertical Padding
垂直居中元素最簡單的方法之一是使用padding:
padding-top: 24px;
padding-bottom: 24px;
}
Vertical Align
vertical-align 屬性可用於一個或多個元素。
在此示例中，叉子和刀子應與桌子垂直居中。
.desk {
text-align: center;
}
.plate,
.fork,
. knife {
vertical-align: middle;
}
Flexbox< /span>
為了對齊盤子，叉子和刀，我們可以使用flexbox:
.desk {
display: flex;
justify-content: center;
align-items: center;
}
塊元素
絕對定位
通過絕對定位元素，可以使用CSS transform將元素垂直居中：
.plate {
position: absolute;
top: 50%;
transform: translateY(-50%);
}< br>
如果知道元素高度，則可以使用負邊距代替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;
}< br>其他元素類型
絕對定位
.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本）
大獎：留言點贊數「第一名」可獲得一本
HTML5 與CSS3 權威指南（第4版·下冊）參與獎：隨機抽取「2位」優質評論送出「10元」紅包。
在看抽獎（1本）
記得先添加我微信，不然我看不到哪些小伙伴點再看
大獎：隨機抽取「1位」在看同學送出一本
HTML5 與CSS3 權威指南（第4版·下冊）參與獎：隨機抽取「2位」在看送出「20元」紅包。
文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/Multiple%20CSS%20centering%20schemes%20that%20you%20dont%20know.html
支付宝扫一扫 
评论列表（196条）
测试