整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
實際工作中，經(jīng)常會遇到容器居中問題，而CSS容器水平和垂直居中的方法，網(wǎng)絡(luò)上已經(jīng)有很多相關(guān)文章，在這里，我也對工作中用到的一些居中方法進行了總結(jié)，并加入了一些自己的觀點，如有錯誤歡迎指正。
假設(shè)有如下html和樣式，我們需要將inner容器居中：
效果如下：
此外，這種寫法的:
margin-left和margin-top也可以換成transform:translate(-100px,-100px)。
注：這里的inner是必須要有寬高
效果如下：
注：這里的inner是必須要有寬高的，因為四個方向都為0，一旦不寫寬度，inner就會“觸及底線”。
注：1、outer由于變成了表格，不再像普通的塊容器寬度默認一整行，所以要加上寬度。
2、這個方法既適用于固定高度的容器，也適用于不固定高度的容器。
注：此方法非常好用，當(dāng)然不考慮兼容性。而且，inner無論是否有寬高都適用。
注：此方法非常好用，當(dāng)然不考慮兼容性。而且，inner無論是否有寬高都適用。
好東西就要總結(jié)起來，好東西就要收藏起來，隨著瀏覽器兼容性越來越好，上面的很多方法已經(jīng)可以放心使用了。當(dāng)然，如果各位有更好的方法，歡迎在下方評論留言哦！
許多方法可以將HTML元素與CSS對齊，但是一起使用或單獨使用它們并不是那么容易。開發(fā)人員所面臨的困難之一就是試圖將元素集中在頁面中間。
因此，在本文中，我將展示一些最常用的方法，即通過使用不同的CSS屬性在水平和垂直方向上居中圖像。
讓我們開始使用3個不同的CSS屬性將圖像水平居中。
使圖像水平居中的第一種方法是使用text-align屬性。但是，僅當(dāng)圖像位于塊級容器（例如<div>）內(nèi)時，此方法才有效：
使圖像居中的另一種方法是使用margin：auto屬性（用于左邊距和右邊距）。但是，單獨使用margin：Auto將不適用于圖像。如果需要使用margin：auto，則還必須使用2個其他屬性。
margin-auto屬性對內(nèi)聯(lián)級別的元素沒有任何影響。由于<img>標(biāo)簽是一個內(nèi)聯(lián)元素，因此我們需要先將其轉(zhuǎn)換為塊級元素：
其次，我們還需要定義寬度。因此，左右邊緣可以占用其余的空白空間并自動對齊，可以這樣解決問題（除非我們給出100％的寬度）：
將圖像水平居中的第三種方法是使用display：flex。同樣，我們對容器使用text-align屬性，它也會使用display：flex。但是，僅使用display：flex是不夠的。容器還必須具有一個稱為justify-content的附加屬性。
justify-content屬性與display：flex一起使用，我們可以使用它水平放置圖像的中心。最后，圖像的寬度必須小于容器的寬度，否則，它會占用100％的空間，然后我們就無法對其進行集中化。
1、Display: Flex
對于垂直對齊，使用display：flex確實很有幫助。考慮到我們的容器的高度為800px，但圖像的高度僅為500px：
現(xiàn)在，在這種情況下，向容器中添加一行代碼（align-items：center）就可以了：
如果將align-items屬性與display：flex一起使用，就會將元素垂直放置。
2、位置：絕對和變換屬性
垂直對齊的另一種方法是一起使用position和transform屬性。這個有點復(fù)雜，所以讓我們一步一步地做。
步驟1：定義絕對位置
首先，我們將圖像的定位行為從靜態(tài)更改為絕對：
同樣，它應(yīng)該位于相對放置的容器內(nèi)，因此我們添加一個位置：相對于其容器的div。
步驟2：定義頂部和左側(cè)屬性
其次，我們定義圖像的頂部和左側(cè)屬性，并設(shè)置為50％。這會將圖像的起點（左上角）移到容器的中心：
步驟3：定義變換屬性
在第二步的時候已經(jīng)將圖像的一部分移出容器。因此，我們需要將其取回內(nèi)部。在圖像上定義轉(zhuǎn)換屬性，并在其X和Y軸上添加負50％可以達到目的：
還可以使用其他方法進行水平和垂直居中，我這里只嘗試了最常用的方法。希望這篇文章可以幫助你了解如何在頁面中心對齊圖像。
CSS和HTML結(jié)合布局頁面的過程中，有一組被人們稱為“盒屬性”的CSS樣式，被廣泛的使用到。相信經(jīng)常布局寫頁面的朋友們對盒屬性一定不陌生。在CSS技術(shù)的發(fā)展過程中，盒屬性也有了許多次改進，今天小海老師就為大家講一講盒屬性中的CSS樣式如何使用。
承接文章：通欄導(dǎo)航欄的制作，綜合使用CSS屬性，代碼不超過30行
技術(shù)等級：初級 | 適合前端開發(fā)的初學(xué)者閱讀學(xué)習(xí)。
希望收藏了這篇文章的你同時也可以關(guān)注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認真閱讀，你一定會學(xué)到對你有用的知識。
盒屬性主要涉及到三類CSS屬性：
padding
margin
border
一、CSS中的盒概念：
CSS技術(shù)將HTML中所有的元素都認為是一個“盒子”，并把這個“盒子”分為了三個組成部分，這三個組成部分分別叫做“填充”、“邊界”、“邊框”。顧名思義，盒子的主要功能就是盛放東西，CSS的意思是將各個HTML標(biāo)記對看做了容器，而標(biāo)記對內(nèi)部存放的文本、圖片、列表、表格、表單等都被看做了容器所盛放的內(nèi)容。
一個裝有地球的盒子
CSS技術(shù)為盒子的三個組成部分下了明確的定義：
填充：指盒子邊框與盒子內(nèi)容之間的距離。
邊界：指盒子與盒子之間的距離。
邊框：指填充與邊界之間的部分。
CSS的盒模型
盒子的三個組成部分中，“填充”和“邊界”只提供了相關(guān)的距離屬性，而“邊框”提供了相關(guān)的距離屬性、顏色屬性和樣式屬性。
二、調(diào)整盒子的填充距離：
CSS技術(shù)利用padding系列屬性來調(diào)整盒子的填充距離。
CSS技術(shù)利用padding系列屬性來調(diào)整盒子的填充距離
padding屬性的取值為四個數(shù)值，按照“上、右、底、左”的順序排列書寫，之間用空格隔開。
padding屬性的使用格式：
padding:top right bottom left;
padding屬性的取值：
帶有單位的長度值。
auto
百分比
padding屬性還派生出下列四個子屬性，用于調(diào)整四個方向上單獨的填充距離：
padding-top，設(shè)置盒子頂部填充的距離。
padding-right，設(shè)置盒子右側(cè)填充的距離。
padding-bottom，設(shè)置盒子底部填充的距離。
padding-left，設(shè)置盒子左側(cè)填充的距離。
注意：盒子的填充具備了數(shù)值后，為了保證盒子的大小不發(fā)生變化，必須修改盒子的寬度和高度。
盒子的實際高度=盒子的期望高度-盒子的頂部填充距離-盒子的底部填充距離
盒子的實際寬度=盒子的期望寬度-盒子的左側(cè)填充距離-盒子的右側(cè)填充距離
例如：希望創(chuàng)建一個寬度為500，高度為300的盒子。同時頂部填充距離為10像素，左側(cè)填充距離為20像素，右側(cè)和底部填充均不設(shè)置，則padding屬性取值如下：
padding:10px 0 0 20px;
因此，計算盒子的實際寬高：
盒子的實際高度=300px-10px-0px=290px
盒子的實際寬度=500px-20px-0px=480px
所以，該盒子的CSS代碼應(yīng)設(shè)置為如下所示：
width:480px; height:290px;
padding:10px 0 0 20px;
當(dāng)然，有開發(fā)經(jīng)驗的人一定知道，CSS3技術(shù)提供了一個名為box-sizing的屬性，避免了這類填充相減的復(fù)雜操作。在后續(xù)的文章中，我會為大家全面介紹CSS3技術(shù)的使用。
三、調(diào)整盒子的邊界距離：
CSS技術(shù)利用margin系列屬性來調(diào)整盒子的邊界距離。
CSS技術(shù)利用margin系列屬性來調(diào)整盒子的邊界距離
margin屬性的取值為四個數(shù)值，按照“上、右、底、左”的順序排列書寫，之間用空格隔開。
margin屬性的使用格式：
margin:top right bottom left;
margin屬性的取值：
帶有單位的長度值（可以取負值）。
auto
百分比
margin屬性還派生出下列四個子屬性，用于調(diào)整四個方向上單獨的邊界距離：
margin-top，設(shè)置盒子頂部邊界的距離。
margin-right，設(shè)置盒子右側(cè)邊界的距離。
margin-bottom，設(shè)置盒子底部邊界的距離。
margin-left，設(shè)置盒子左側(cè)邊界的距離。
四、調(diào)整盒子的邊框
CSS技術(shù)利用border系列屬性來調(diào)整盒子的邊框。
CSS技術(shù)利用border系列屬性來調(diào)整盒子的邊框
1、調(diào)整盒子邊框的粗細：
border-top-width，設(shè)置盒子頂部邊框的粗細。
border-right-width，設(shè)置盒子右側(cè)邊框的粗細。
border-bottom-width，設(shè)置盒子底部邊框的粗細。
border-left-width，設(shè)置盒子左側(cè)邊框的粗細。
border-width，設(shè)置盒子四個方向邊框的粗細。
border-width屬性的使用格式：
border-width:top right bottom left;
2、調(diào)整盒子邊框的顏色：
border-top-color，設(shè)置盒子頂部邊框的顏色。
border-right-color，設(shè)置盒子右側(cè)邊框的顏色。
border-bottom-color，設(shè)置盒子底部邊框的顏色。
border-left-color，設(shè)置盒子左側(cè)邊框的顏色。
border-color，設(shè)置盒子四個方向邊框的顏色。
border-color屬性的使用格式：
border-color:top right bottom left;
3、調(diào)整盒子邊框的樣式：
border-top-style，設(shè)置盒子頂部邊框的樣式。
border-right-style，設(shè)置盒子右側(cè)邊框的樣式。
border-bottom-style，設(shè)置盒子底部邊框的樣式。
border-left-style，設(shè)置盒子左側(cè)邊框的樣式。
border-style，設(shè)置盒子四個方向邊框的樣式。
border-style屬性的使用格式：
border-style:top right bottom left;
border-style屬性有如下所示的取值：
none，盒子無邊框。
solid，盒子邊框為實線。
dashed，盒子邊框為虛線。
dotted，盒子邊框為點邊框。
double，盒子邊框為雙實線邊框。
groove，盒子邊框為溝槽狀。
ridge，盒子邊框為脊?fàn)睢?/p>
inset，盒子邊框為凹陷狀。
outset，盒子邊框為凸出狀。
4、設(shè)置盒子一個位置的邊框效果：
CSS還提供了可以設(shè)置盒子單個位置邊框效果的屬性。
border-top，設(shè)置盒子頂部邊框的效果。
border-right，設(shè)置盒子右側(cè)邊框的效果。
border-bottom，設(shè)置盒子底部邊框的效果。
border-left，設(shè)置盒子左側(cè)邊框的效果。
使用格式：
border-top:style width color;
例如：border-top:solid 1px #ff0000;
5、設(shè)置盒子所有邊框具有相同的效果：
CSS技術(shù)還提供了可以調(diào)整盒子所有邊框都具有相同外觀的屬性。
border，設(shè)置盒子四個方向所具備邊框外觀效果。
使用格式：
border:style width color;
例如：border:solid 1px #ff0000;
如果大家希望得到更加全面的關(guān)于HTML和CSS技術(shù)講解的內(nèi)容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發(fā)給你，幫助你在前端開發(fā)的道路上闊步前行。
在頭條上發(fā)表的這些文章都是從前端開發(fā)的基礎(chǔ)開始一步一步講起的。我非常希望能有更多的前端開發(fā)初學(xué)者通過我寫的文章，逐步學(xué)到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學(xué)過程中的經(jīng)驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設(shè)計版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。
希望收藏了這篇文章的你同時也可以關(guān)注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認真閱讀，你一定會學(xué)到對你有用的知識。
關(guān)注“小海前端”，我會繼續(xù)為大家奉上更加深入的前端開發(fā)文章，也希望更多的初學(xué)者跟著學(xué)下去，我們共同將前端開發(fā)的路努力堅持的走下去。
由于篇幅問題，本篇文章只為大家介紹了盒屬性都有哪些，以及基本的使用格式。在下一篇文章中，小海老師會為大家講解盒屬性的使用技巧已經(jīng)一些常見的應(yīng)用領(lǐng)域。希望對大家的工作能夠提供幫助。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
