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