整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
許多方法可以將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ì)齊圖像。
實(shí)現(xiàn)css兩端對(duì)齊，我在網(wǎng)上找了很多方法，都不怎么實(shí)用，都是兼容性鬧得，column是css3的屬性，是多列布局，使用column來(lái)實(shí)現(xiàn)兩端對(duì)齊簡(jiǎn)單實(shí)用，就要設(shè)置下模塊的個(gè)數(shù)跟column的列數(shù)一致就行，先看它的的3個(gè)屬性：
1.column-count 屬性規(guī)定元素應(yīng)該被分隔的列數(shù)
2.column-gap 屬性規(guī)定列之間的間隔
2.column-rule 屬性設(shè)置列之間的寬度、樣式和顏色規(guī)則。
CSS3 多列屬性的兼容性：Internet Explorer 10 和 Opera 支持多列屬性，F(xiàn)irefox 需要前綴 -moz-，Chrome 和 Safari 需要前綴 -webkit-，特別注意：Internet Explorer 9 以及更早的版本不支持多列屬性。
實(shí)現(xiàn)css兩端對(duì)齊的例子：用column-count定義對(duì)象的列數(shù),例子中有4個(gè)p（即4個(gè)模塊），那么就定義為4列，再用column-gap定義了對(duì)象中列與列的間距，間距不能設(shè)置為百分比，但是只能用px，具體的看下面的代碼：
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>實(shí)現(xiàn)css兩端對(duì)齊</title>
<style type="text/css">
*{margin:0;padding:0;}
.box{
margin:100px 0;
-webkit-column-count:4;-moz-column-count:4;column-count:4;
-webkit-column-gap:30px;-moz-column-gap:30px;column-gap:30px;
}
.box p{
height:30px;
line-height:30px;
text-align:center;
border:1px solid red;
color:#000;
font-size:12px;
}
</style>
</head>
<body>
<div class="box">
<p>第1列</p>
<p>第2列</p>
<p>第3列</p>
<p>第4列</p>
</div>
</body>
</html>
點(diǎn)擊查看css兩端對(duì)齊效果（http://tangjiusheng.com/css3/column.html）
除注明外的文章,均為來(lái)源:湯久生博客,轉(zhuǎn)載請(qǐng)保留本文地址！
原文地址：http://tangjiusheng.com/css3/130.html
內(nèi)容首發(fā)于工粽號(hào)：程序員大澈，每日分享一段優(yōu)質(zhì)代碼片段，歡迎關(guān)注和投稿！
大家好，我是大澈！
本文約 500+ 字，整篇閱讀約需 1 分鐘。
今天分享一段優(yōu)質(zhì) CSS 代碼片段，可以輕松實(shí)現(xiàn)元素垂直水平居中對(duì)齊。
老規(guī)矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評(píng)論區(qū)留下你的見(jiàn)解！
div {
display: grid;
place-content: center;
}分享原因
這段代碼展示了如何使用 CSS Grid 布局以及 place-content 屬性來(lái)居中對(duì)齊元素。
CSS Grid 是一種強(qiáng)大的布局工具，提供了簡(jiǎn)單且靈活的方式來(lái)實(shí)現(xiàn)復(fù)雜的布局，而place-content 屬性進(jìn)一步簡(jiǎn)化了居中對(duì)齊的實(shí)現(xiàn)。
相較于 Flex 布局，Grid 布局僅僅只需一行代碼即可搞定居中對(duì)齊！
代碼解析
1. display: grid;
設(shè)置元素為網(wǎng)格容器。
網(wǎng)格容器可以通過(guò)定義網(wǎng)格行和列來(lái)布置其子元素。
2. place-content: center;
place-content 是 align-content 和 justify-content 的組合屬性。
center 值表示內(nèi)容在容器的中央對(duì)齊。
3. 兼容性
place-content: center; 的兼容性在現(xiàn)代瀏覽器中較好，某一些舊版瀏覽器的不兼容完全可以忽略了。
以下是一些常見(jiàn)瀏覽器的具體支持情況：
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
