CSS-元素水平居中、垂直居中、水平垂直居中解決方案

最近更新

2020.04.01

1. 水平居中

1.1 行內元素：文本水平居中,給父級元素設定text-align:center

html

<div class="spanParent">
	<span>span等行內元素水平居中</span>
</div>

css

/* 行內元素：文本水平居中,
給父級元素設定text-align:center */
.spanParent {
	width: 100%;
	text-align: center;
	/*文本水平居中,給父級元素設定*/
	border-bottom: 1px solid #ccc;
	background: pink;
}

1.2 塊級元素,width確定

塊級元素,width確定，使用margin實現：margin:0 auto

html

<div class="box"></div>

css

.box {
	width: 100px;
	height: 100px;
	background: yellow;
	/*水平居中,上下,左右*/
	margin: 0 auto;
}

margin:0 auto

<div class="box-test-father">box-test-father
	<div class="box-test"></div>
</div>

css

.box-test-father {
	width: 100%;
	height: 200px;
	background-color: gray;
}

.box-test {
	width: 100px;
	height: 100px;
	background-color: #0000FF;
	margin: 0 auto;
}

父元素設置相對定位,子元素絕對定位 + margin:0 auto; 以及 top:0;left:0;right:0;bottom:0

.parent4 {
	/*相對定位*/
	position: relative;
	width: 100%;
	height: 200px;
	background: darkgray;
}

.son4 {
	/*設置絕對定位*/
	position: absolute;
	/*寬度固定*/
	width: 100px;
	height: 100px;
	background: #abcdef;
	/*設置top | left | right | bottom都等於0*/
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
}

與上面一種方式的區別，見效果圖

父元素相對定位,子元素絕對定位 + left: 50%; margin-left：負寬度/2

html

<div class="parent">
	<div class="son">son</div>
</div>

css

/* 塊級元素（寬度確定） */
.parent1 {
	/*相對定位*/
	position: relative;
	width: 100%;
	height: 200px;
	background: darkgray;
}

.son1 {
	width: 100px;
	height: 100px;
	background: pink;
	position: absolute;
	left: 50%;
	margin-left: -50px;
}

1.3 塊級元素,width有無確定均可

display:table; margin: 0 auto

.box6 {
	/*基本樣式*/
	width: 100px;
	height: 100px;
	background: skyblue;

	display: table;
	margin: 0 auto;
}

父元素設置相對定位,子元素絕對定位 + transform

/* 塊級元素（寬度未確定） */
.parent2 {
	/*相對定位*/
	position: relative;
	width: 100%;
	height: 200px;
	background: darkgray;
}

.son2 {
	width: 100px;
	height: 100px;
	background: pink;
	position: absolute;
	left: 50%;
	/*設置子元素 transform:translateX(-50%)*/
	transform: translate(-50%, 0);
}

彈性布局flex,父元素display:flex;flex-direction:row[默認];just-content:center

設置父元素display:flex(聲明彈性盒模型)
flex-direction:row(設置主軸方向為水平方向)
justify-content:center(定義項目在主軸上的對齊方式)

/* 塊級元素（寬度未確定） */
.parent3 {
	display: flex;
	/*row設置主軸方向為水平方向*/
	flex-direction: row;
	/*定義了在當前行上,彈性項目沿主軸如何排布*/
	justify-content: center;
	background: darkcyan;
}

.son3 {
	width: 100px;
	height: 100px;
	background: pink;
}

父元素text-align:center + 子元素display:inline-block

在子元素中設置display屬性為inline-block后，能相對於父元素表現內聯樣式，
所以父元素的text-align: center;文本居中對子元素生效（缺點：只能實現水平居中）

.parent7 {
	background-color: navy;
	width: 400px;
	height: 300px;
	text-align: center;
}

.son7 {
	background-color: #cccccc;
	width: 100px;
	height: 100px;
	display: inline-block;
}

2.垂直居中

2.1 父元素line-height : 其高度，適合純文字類內容居中

若是單行文本內容,可以設置 line-height 等於父元素的高度,

注意這是定高的，也就是高度是固定不變的,

這種方法只適用於單行文本的元素才適用,比如塊級元素里面文本

html內容結構代碼

<div class="parent">
     <span>文本垂直居中</span>
</div>

css層疊樣式結構代碼

.parent{
    width:400px;
    height:100px;
    background:pink;
    line-height:100px;/*line-height:屬性值==元素的高度值*/
}

2.2 父元素設置相對定位,子元素絕對定位 + margin:auto 0;以及top:0;left:0;right:0;bottom:0

.parent4 {
	/*相對定位*/
	position: relative;
	width: 100%;
	height: 200px;
	background: darkgray;
}

.son4 {
	/*設置絕對定位*/
	position: absolute;
	/*寬度固定*/
	width: 100px;
	height: 100px;
	background: #abcdef;
	/*設置top | left | right | bottom都等於0*/
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto 0;
}

2.3 父元素設置相對定位，子元素絕對定位 + top: 50%; margin-top：負高度/2

html結構代碼示例所示

<div class="parent">
      <div class="son"></div>
</div>

css結構代碼

.parent{
        position:relative;
        width:400px;        /*父元素設置寬度和高度*/
        height:400px;
        border:1px solid red
}
.son{
        width:100px;
        height:100px;
        position:absolute;
        top:50%;
        margin-top:-50px; /*-寬度/2*/
        background:pink;
}

優點：適用於所有瀏覽器
缺點：父元素空間不夠時,子元素可能不可見,當瀏覽器窗口縮小時,滾動條不出現時,如果子元素設置了overflow:auto,則高度不夠時會出現滾動條

2.4 父元素設置相對定位，子元素絕對定位 + transform

html結構代碼示例所示

<div class="parent">
      <div class="son"></div>
</div>

css結構代碼

.parent{
        position:relative;
        width:400px;        /*父元素設置寬度和高度*/
        height:400px;
        border:1px solid red
}
.son{
        width:100px;
        height:100px;
        position:absolute;
        top:50%;
        /*設置子元素 transform: translateY(-50%);*/
        transform: translate(0, -50%);
        background:pink;
}

2.5 table布局, 父元素display:table + 子元素display:table-cell, vertical-align:middle

父元素使用display:table,讓元素以表格的形式渲染

子元素可用display:table-cell(讓元素以表格形式渲染), vertical-align:middle(使元素垂直對齊)

html內容結構代碼

<div class="parent">
     <div class="son">content</div>
 </div>

css層疊樣式結構代碼

.parent{
    display:table; /*讓元素以表格形式渲染*/
    border:1px solid red;
    background:red;
    height:200px;
}
.son{
    display:table-cell; /*讓元素以表格的單元表格形式渲染*/
    vertical-align:middle;/*使用元素的垂直對齊*/
    background:yellow;
}

2.6 彈性布局flex,父元素display:flex;flex-direction:column;align-items:center

display:flex(聲明彈性盒模型)

flex-direction:column(設置主軸方向為垂直方向)

align-items:center(元素在側軸中間位置,富裕空間在側軸兩側)

html內容結構代碼

<div class="parent">
    <div class="son">1</div>
</div>

css層疊樣式代碼

.parent{
    height:400px;
    display:flex;
    flex-direction: column;/*容器內項目的排列方向(默認橫向排列),row表示沿水平主軸由左向右排列,column沿垂直主軸右上到下　*/
    align-items: center;  /*居中*/
    border:1px solid red;
}
.son{
    width:100px;
    height:100px;
    background:orange;
}

優點：使用display:flex布局,內容塊的寬高任意,優雅的溢出，可用於復雜的高級布局技術

缺點:IE678不支持,兼容性處理,火狐，谷歌,要瀏覽器前綴

3.水平垂直居中

3.1 若是文本圖片,則可以使用line-height:高度; text-align:center

html結構代碼

<div class="wrap">
    文本水平垂直居中顯示
</div>

css結構代碼

.wrap {
	width: 400px;
	height: 400px;
	text-align: center;
	/*文本水平居中顯示*/
	line-height: 400px;
	/*垂直居中顯示*/
	font-size: 36px;
	border: 1px solid red;
}

3.2 若是定寬定高,父元素設置相對定位;子元素絕對定位,left:50%,top:50%; margin-left:負寬度/2; margin-top:負高度/2

html結構內容代碼

<div class="parent">
      <div class="son"></div>
</div>

css示例代碼如下所示

.parent{
    width:100%;
    height:500px;
    position:relative;
    background:red;
}
.son{
    width:100px;
    height:100px;
    background:pink;
    position:absolute;
    left:50%;
    top:50%;      /*top50%*/
        margin-left:-50px;/*-(元素寬度/2)*/
    margin-top:-50px; /*-(元素高度/2)*/
}

3.3 父元素設置相對定位;子元素絕對定位,margin:auto,同時,top:0;left:0;right:0;bottom:0

html內容結構代碼

<div class="parent">
    <div class="son"></div>
</div>

css層疊樣式代碼

.son{
    position:absolute;  /*設置絕對定位*/
    width:100px;        /*寬度固定*/
    height:100px;
    background:#abcdef;
    top:0;
    left:0;             /*設置top | left | right | bottom都等於0*/
    right:0;
    bottom:0;
    margin: auto;      /*水平垂直居中*/
}

3.4 父元素display: table-cell;text-align: center;vertical-align: middle;子元素display: inline-block

兼容性：IE6，IE7下垂直居中失效

CSS代碼:

.parent {
	/*基本樣式*/
	width: 500px;
	height: 500px;
	background: #fee;
	/*display*/
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

.son {
	/*基本樣式*/
	width: 200px;
	height: 200px;
	background: #aa0;
	/*display：通過轉為行內塊配合父級元素使用text-align實現水平居中*/
	display: inline-block;
}

3.5 父元素設置相對定位，子元素絕對定位 + left:50%,top:50%; transform

兼容性：一看到CSS3屬性就知道了IE8及以下瀏覽器都不支持

CSS代碼：

.parent {
	/*基本樣式*/
	width: 500px;
	height: 500px;
	background: #fee;
	/*定位方式*/
	position: relative;
}

.son {
	/*基本樣式*/
	width: 200px;
	height: 200px;
	background: #aa0;
	/*定位方式*/
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}

3.6 彈性布局flex，父元素display: flex; 子元素margin: auto

兼容性：IE9及以下版本垂直居中都失效，由於代碼簡單，推薦移動端使用

CSS代碼：

.parent {
	/*基本樣式*/
	width: 500px;
	height: 500px;
	background: #fee;
	/*display*/
	display: flex;
}

.son {
	/*基本樣式*/
	width: 200px;
	height: 200px;
	background: #aa0;
	/*居中*/
	margin: auto;
}

3.7 彈性布局flex-2;父元素display:flex;align-items:center;justify-content:center

兼容性：IE9及以下版本水平垂直居中完全失效，推薦移動端使用

CSS代碼：

.parent {
	/*基本樣式*/
	width: 500px;
	height: 500px;
	background: #fee;
	/*display*/
	display: flex;
	align-items: center;
	justify-content: center;
}

.son {
	/*基本樣式*/
	width: 200px;
	height: 200px;
	background: #aa0;
}

參考：

CSS讓一個元素水平垂直居中

如何實現元素的水平垂直居中