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