水平和垂直方向都可居中

統一HTML代碼：

<div class="outer"><div class="inner"></div> </div>

相同的css代碼抽取：

.inner{width: 50px;height: 50px;background-color: aqua; } .outer{border: 1px solid black; }

①、margin:auto && 絕對定位

.inner{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto; } .outer{position: relative;width:100px;height: 100px; } 注意點：
①、absolute生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。
inner設置了absolute定位，所以要在outer設置relative，這樣才能相對于outer進行相對定位，否則相對于body定位，因為默認是static定位。
left、right等不一定要設置為0，只要left和right的值相等，即可實現水平居中。
同理，top和bottom的值相等，即可實現垂直居中。

②、margin負值 && 相對定位

.inner{position: relative;top: 50%;left: 50%;margin: -25px 0 0 -25px; /* 外邊距為自身寬高的一半 */ } 注意點：
①、inner元素要設為relative
②、margin外邊距為自身寬高的一半（負數）

③、CSS3 transform屬性

.inner{position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%); } 注意點：
①、inner元素要設為relative
②、transform 屬性向元素應用 2D 或 3D 轉換，translate(x,y) 定義 2D 轉換

④、css3 flex布局

.outer{display: flex;align-items: center; /* 垂直居中 */justify-content: center; /* 水平居中 */ }

僅水平方法居中的方法

①、margin: 0 auto

.inner{margin: 0 auto; }

②、text-align: center

.outer{text-align: center; } .inner{display: inline-block; }

最后在本文末尾還會提到 定位對于元素特征的改變
在介紹css元素居中方法之前，我們有必要認識一下元素的三種類型

html元素有三種類型：

①、塊狀元素： 如div -------- display：block
②、內聯元素： 如span ------display：inline
③、內聯塊元素：如input ---- display：inline-block

塊狀元素特征：
(1)能夠識別寬高
(2)margin和padding的上下左右均對其有效
(3)可以自動換行
(4)多個塊狀元素標簽寫在一起，默認排列方式為從上至下

行內元素特征：
(1)設置寬高無效
(2)對margin僅設置左右方向有效，上下無效；padding設置上下左右都有效，即會撐大空間
在IE7的時候，padding-top 和 padding-bottom無效
(3)不會自動進行換行

行內塊狀元素特征：
(1)不自動換行
(2)能夠識別寬高
(3)默認排列方式為從左到右

在position設置為 fixed或者absolute的時候，元素會脫離文檔流
*此時對于行內元素來說可以設置寬高

總結

以上是生活随笔為你收集整理的css元素居中方法归纳的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。