整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
哥最近調(diào)整自己的一個(gè)網(wǎng)站時(shí)，覺(jué)得在發(fā)布文章時(shí)，手動(dòng)把圖片居中，實(shí)在有些麻煩。能不能讓文章內(nèi)容中的圖片自動(dòng)居中呢？是否可以通過(guò)樣式控制表來(lái)實(shí)現(xiàn)？
網(wǎng)上找了下答案，似乎有些過(guò)于復(fù)雜了。自己動(dòng)手實(shí)踐吧。
首先要調(diào)整的，是讓圖片獨(dú)占一行空間。
補(bǔ)充CSS知識(shí)點(diǎn)：
圖像（<img>標(biāo)簽）默認(rèn)是行內(nèi)樣式（inline style），行內(nèi)樣式的大體意思是，它前邊或后邊的HTML標(biāo)簽元素會(huì)緊挨著排在它的前后（如影隨形），不會(huì)另?yè)Q一行;而像DIV標(biāo)簽則默認(rèn)是塊級(jí)元素，塊級(jí)元素前后的標(biāo)簽元素會(huì)換行。因此需要把文章內(nèi)容中的圖片樣式由行內(nèi)樣式更換為block塊級(jí)元素，要不就易和文字內(nèi)容糾纏在一起。
簡(jiǎn)單點(diǎn)：
block元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符。
inline默認(rèn)。元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符。
在原有的控制圖像的樣式中增加：display: block。
.entry img {
max-width: 100%;
height: auto;
display: block;
}
圖像設(shè)為塊級(jí)元素后，需要讓圖像居中。居中用的同樣是網(wǎng)頁(yè)布局時(shí)整體居中的代碼，即margin:0 auto，0可以改為任何數(shù)據(jù)，像素或EM；重要的是AUTO屬性，因?yàn)樗刂圃刈笥业木嚯x，AUTO則是用于居中的屬性。
實(shí)例：
.entry img {
max-width: 100%;
height: auto;
display: block;
margin:0 auto;
}
經(jīng)以上設(shè)置后，圖像已能自動(dòng)在文章內(nèi)容中居中。但在實(shí)踐中，發(fā)現(xiàn)一些舊的網(wǎng)頁(yè)文章，在發(fā)布時(shí)其圖像有行內(nèi)樣式，如：<img style=”margin:0;”>這樣的。由于行內(nèi)樣式的優(yōu)先（層疊）級(jí)別高于外部樣式表中的圖像自動(dòng)居中的定義，因此剛才定義的：margin:0 auto就失效了。
這也不是問(wèn)題，給這個(gè)居中用!important指定為最優(yōu)先級(jí)別。最樣使用的樣式如下。
.entry img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto !important;
}
好記性不如爛筆頭，記下來(lái)方便再次用。
實(shí)例應(yīng)用可查看：起點(diǎn)通首頁(yè)點(diǎn)任一文章內(nèi)容頁(yè)，或肖運(yùn)華個(gè)人博客文章內(nèi)容頁(yè)。
許多方法可以將HTML元素與CSS對(duì)齊，但是一起使用或單獨(dú)使用它們并不是那么容易。開(kāi)發(fā)人員所面臨的困難之一就是試圖將元素集中在頁(yè)面中間。
因此，在本文中，我將展示一些最常用的方法，即通過(guò)使用不同的CSS屬性在水平和垂直方向上居中圖像。
讓我們開(kāi)始使用3個(gè)不同的CSS屬性將圖像水平居中。
使圖像水平居中的第一種方法是使用text-align屬性。但是，僅當(dāng)圖像位于塊級(jí)容器（例如<div>）內(nèi)時(shí)，此方法才有效：
使圖像居中的另一種方法是使用margin：auto屬性（用于左邊距和右邊距）。但是，單獨(dú)使用margin：Auto將不適用于圖像。如果需要使用margin：auto，則還必須使用2個(gè)其他屬性。
margin-auto屬性對(duì)內(nèi)聯(lián)級(jí)別的元素沒(méi)有任何影響。由于<img>標(biāo)簽是一個(gè)內(nèi)聯(lián)元素，因此我們需要先將其轉(zhuǎn)換為塊級(jí)元素：
其次，我們還需要定義寬度。因此，左右邊緣可以占用其余的空白空間并自動(dòng)對(duì)齊，可以這樣解決問(wèn)題（除非我們給出100％的寬度）：
將圖像水平居中的第三種方法是使用display：flex。同樣，我們對(duì)容器使用text-align屬性，它也會(huì)使用display：flex。但是，僅使用display：flex是不夠的。容器還必須具有一個(gè)稱(chēng)為justify-content的附加屬性。
justify-content屬性與display：flex一起使用，我們可以使用它水平放置圖像的中心。最后，圖像的寬度必須小于容器的寬度，否則，它會(huì)占用100％的空間，然后我們就無(wú)法對(duì)其進(jìn)行集中化。
1、Display: Flex
對(duì)于垂直對(duì)齊，使用display：flex確實(shí)很有幫助。考慮到我們的容器的高度為800px，但圖像的高度僅為500px：
現(xiàn)在，在這種情況下，向容器中添加一行代碼（align-items：center）就可以了：
如果將align-items屬性與display：flex一起使用，就會(huì)將元素垂直放置。
2、位置：絕對(duì)和變換屬性
垂直對(duì)齊的另一種方法是一起使用position和transform屬性。這個(gè)有點(diǎn)復(fù)雜，所以讓我們一步一步地做。
步驟1：定義絕對(duì)位置
首先，我們將圖像的定位行為從靜態(tài)更改為絕對(duì)：
同樣，它應(yīng)該位于相對(duì)放置的容器內(nèi)，因此我們添加一個(gè)位置：相對(duì)于其容器的div。
步驟2：定義頂部和左側(cè)屬性
其次，我們定義圖像的頂部和左側(cè)屬性，并設(shè)置為50％。這會(huì)將圖像的起點(diǎn)（左上角）移到容器的中心：
步驟3：定義變換屬性
在第二步的時(shí)候已經(jīng)將圖像的一部分移出容器。因此，我們需要將其取回內(nèi)部。在圖像上定義轉(zhuǎn)換屬性，并在其X和Y軸上添加負(fù)50％可以達(dá)到目的：
還可以使用其他方法進(jìn)行水平和垂直居中，我這里只嘗試了最常用的方法。希望這篇文章可以幫助你了解如何在頁(yè)面中心對(duì)齊圖像。
SS 是前端里面的基礎(chǔ)之一，也是非常重要的一部分，它往往決定了你所做出來(lái)的網(wǎng)頁(yè)頁(yè)面是否美觀。在設(shè)計(jì)網(wǎng)頁(yè)頁(yè)面的過(guò)程中，總會(huì)有將元素或者文字進(jìn)行水平垂直居中的要求。下面w3cschool編程獅就為大家介紹 CSS 中幾種常用到的水平垂直居中的方法。
當(dāng)元素有給定的高度以及寬度的時(shí)候，使用 margin: auto; 元素僅會(huì)水平居中，并不會(huì)進(jìn)行垂直居中。此時(shí)就需要設(shè)置元素的 position 為 absolute，父級(jí)元素的 position 為 relative，同時(shí)元素的上下左右都需要設(shè)置為 0。
HTML 代碼
<div class="box">
<div class="center1"></div>
</div>CSS 代碼
.box{
width: 200px;
height: 200px;
background-color: #eee;
position: relative;
margin-top: 20px;
}
.center1{
width: 50px;
height: 50px;
background-color: #00ACED;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}效果展示：
當(dāng)已經(jīng)知道了要進(jìn)行水平垂直居中的元素的寬高時(shí)，就可以通過(guò)設(shè)置 position: absolute 來(lái)實(shí)現(xiàn)。但是，使用的同時(shí)還需要結(jié)合其他屬性才完整實(shí)現(xiàn)。因?yàn)椋瑔问窃O(shè)置 absolute，上左距離均為一半，就會(huì)出現(xiàn)下面這種情況。很顯然可以看到，元素并不是完全居中，僅只有左上角的位置在中心點(diǎn)
概念圖：
因此想要實(shí)現(xiàn)元素完全水平垂直居中，在設(shè)置了 absolute 定位后，可以設(shè)置 margin 值為負(fù)，或者使用 calc 來(lái)計(jì)算，上左距離在 50% 的基礎(chǔ)上還要減去元素本身一半的寬高。
margin 值為負(fù)或者 calc 計(jì)算均是在已知元素寬高的情況下，假設(shè)不知道元素的寬高，那么怎么實(shí)現(xiàn)水平垂直居中呢？這里就可以使用 transform 屬性，通過(guò)坐標(biāo)位移來(lái)實(shí)現(xiàn)居中。
CSS 代碼
/* 結(jié)合 margin */
.center2{
width: 50px;
height: 50px;
background-color: #7FFFD4;
position: absolute;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px;
}
/* 結(jié)合 calc 計(jì)算*/
.center2{
width: 50px;
height: 50px;
background-color: #7FFFD4;
position: absolute;
left: calc(50% - 25px)
top: calc(50% - 25px);
}
/* 結(jié)合 transform */
.center2{
width: 50px;
height: 50px;
background-color: #7FFFD4;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}效果展示
03
PART
可以通過(guò)彈性布局來(lái)設(shè)置水平垂直居中，這里需要設(shè)置父級(jí)元素 display:flex; 還需要設(shè)置兩個(gè)屬性，水平布局 justify-content 以及垂直布局 align-items。
HTML代碼
<div class="box2">
<div class="center4"></div>
</div>CSS代碼：
.box2{
background-color: #eee;
width: 200px;
height: 200px;
position: relative;
margin-top: 20px ;
display: flex;
justify-content: center;
align-items: center;
}
.center4{
width: 50px;
height: 50px;
background-color: #B39873;
}效果展示：
前面介紹的是元素如何實(shí)現(xiàn)水平垂直居中，下面介紹的是如何將文字進(jìn)行水平垂直居中。這第一個(gè)方法也是最經(jīng)常用的，使用文本水平對(duì)齊 text-align 和行高 line-height 來(lái)實(shí)現(xiàn)的。
HTML 代碼
<div class="box3">
<div class="center5">文字居中</div>
</div>CSS 代碼
.box3{
background-color: #eee;
width: 200px;
height: 200px;
margin-top: 20px;
}
.center5{
text-align: center;
line-height: 200px;
}效果展示
05
PART
第二個(gè)方法可以通過(guò)網(wǎng)格布局 grid 來(lái)實(shí)現(xiàn)。而這里通過(guò) grid 有兩種方式實(shí)現(xiàn)，一種對(duì)元素本身屬性進(jìn)行設(shè)置，另一種在元素的父級(jí)元素中設(shè)置。兩者看上去內(nèi)容似乎差不多，不同的是在元素中設(shè)置的是 align-self 還要多了一個(gè) margin，父級(jí)元素中是 align-items。
相關(guān)代碼：
/* grid 元素中設(shè)置 */
.box4{
background-color: #eee;
width: 200px;
height: 200px;
margin-top: 20px;
display: grid;
}
.center6{
align-self: center;
justify-content: center;
margin: auto;
}
/* grid 父級(jí)元素中設(shè)置 */
.box5{
background-color: #eee;
width: 200px;
height: 200px;
margin-top: 20px;
display: grid;
align-items: center;
justify-content: center;
}
效果展示：
以上就是關(guān)于 CSS 如何將元素或者文字進(jìn)行水平垂直居中的幾種常用方法，大家還其他關(guān)于 CSS 實(shí)現(xiàn)水平垂直居中的方法嗎？請(qǐng)?jiān)谠u(píng)論區(qū)留下你的想法。
關(guān)注w3cschool編程獅訂閱更多IT資訊、技術(shù)干貨~
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
