建站
咨詢
售后
建站咨詢
新聞中心
一、水平居中
1. 內(nèi)聯(lián)元素
水平居中
(1)text-align
text-align 一般運(yùn)用在塊級(jí)元素中，使其中的文本對(duì)齊。實(shí)際上，運(yùn)用在塊級(jí)元素中的text-align會(huì)使其包含的內(nèi)聯(lián)元素水平對(duì)齊。
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名與空間、虛擬空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、劍閣網(wǎng)站維護(hù)、網(wǎng)站推廣。
.container {
text-align: center;
}2. 塊級(jí)元素
水平居中
(1)margin
如果塊元素的高度和寬度已知，就可以通過(guò)將元素的左右margin值設(shè)置為auto將元素水平居中：
.content {
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
}如果有多個(gè)塊元素，需要將多個(gè)元素包裹在一個(gè)元素中以使用該方法實(shí)現(xiàn)水平居中：
水平居中
水平居中
.box {
display: flex;
margin-left: auto;
margin-right: auto;
}3. 通用
(1)Flex 布局
在 Flex 布局中，justify-content可以用于設(shè)置彈性盒子元素在主軸方向上的對(duì)齊方式。當(dāng)其屬性值為 center 時(shí)，其子元素整體會(huì)在主軸的中心位置。
.container {
display: flex;
justify-content: center;
}如果彈性盒子的主軸是垂直方向，可以使用align-items來(lái)代替justify-content以實(shí)現(xiàn)元素的水平居中：
.container {
display: flex;
flex-direction: column
align-items: center;
}(2)Grid 布局
在 Grid 布局中，justify-content 屬性會(huì)沿著行軸線(水平方向) 在網(wǎng)格容器中對(duì)齊網(wǎng)格。當(dāng)屬性值為center時(shí)，就可以將網(wǎng)格對(duì)齊到網(wǎng)格容器的水平居中位置。
.container {
display: grid;
justify-content: center;
}(3)絕對(duì)定位
可以通過(guò)將使用絕對(duì)定位和變換實(shí)現(xiàn)元素的水平居中：
.container {
position: relative;
}
.content {
position: absolute;
left: 50%;
transform: translateX(-50%);
}如果塊元素的寬度已知，也可以使用負(fù)邊距來(lái)代替transform：
.container {
position: relative;
}
.content {
width: 100px;
position: absolute;
left: 50%;
margin-left: -50px;
}二、垂直居中
1. 塊級(jí)元素
垂直居中
(1)絕對(duì)定位
可以通過(guò)將使用絕對(duì)定位和變換實(shí)現(xiàn)元素的垂直居中：
.container {
position: relative;
}
.content {
position: absolute;
top: 50%;
transform: translateY(-50%);
}如果塊元素的高度已知，也可以使用負(fù)邊距來(lái)代替transform：
argin-top: -50px;}
2. 通用
2. 通用
(1)Flex 布局
在 Flex 布局中，align-items 屬性用來(lái)定義flex子項(xiàng)在flex容器的當(dāng)前行的側(cè)軸(縱軸)方向上的對(duì)齊方式。當(dāng)其屬性值為 center 時(shí)，元素位于容器的中心。
.container {
display: flex;
align-items: center;
}如果將Flex 的主軸切換為垂直方向，則需要使用justify-content來(lái)代替align-items以實(shí)現(xiàn)元素的垂直居中：
.flex {
display: flex;
flex-direction: column;
justify-content: center;
}(2)Grid 布局
使用 CSS Grid 布局中，可以使用 align-content 屬性將項(xiàng)目垂直居中到其網(wǎng)格區(qū)域。
.container {
display: grid;
align-content: center;
}如果將網(wǎng)格的排列方向更改為水平，垂直居中依舊是生效的：
.container {
display: flex;
align-content: center;
grid-auto-flow: column;
}三、水平垂直居中
水平垂直居中
(1)絕對(duì)定位
使元素垂直居中最通用的方法就是使用絕對(duì)定位和transform：
.container {
position: relative;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}如果元素的高度和寬度已知，也可以使用margin來(lái)代替transform:
.container {
position: relative;
}
.content {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}(2)Flex 布局
在使用 Flex 布局時(shí)，可以結(jié)合上面的水平和垂直居中來(lái)實(shí)現(xiàn)水平垂直居中：
.container {
display: flex;
justify-content: center;
align-items: center;
}(3)Grid 布局
在 Grid 布局中，可以使用以下形式來(lái)實(shí)現(xiàn)元素的水平垂直居中：
.container {
display: grid;
place-items: center;
}place-content 屬性是align-content和justify-content的簡(jiǎn)寫(xiě)，當(dāng)該屬性的值為center時(shí)，所有的子元素堆疊在父元素的中間對(duì)齊。
本文標(biāo)題：CSS 居中完全指南，你學(xué)會(huì)了嗎？
轉(zhuǎn)載來(lái)源：http://www.5511xx.com/article/cceihoo.html
