CSS垂直水平居中的各種解決方法彙總

目錄

• CSS水平居中
  • 文本水平居中
  • 單個塊級元素水平居中
  • 多個水平排列的塊級元素 水平居中
  • 多個垂直排列的塊級元素 水平居中
• CSS垂直居中
  • 單行文本垂直居中
  • 多行文本垂直居中
    • 方法1：使用table佈局
    • 方法2：設置vertical-align，line-height
    • 方法3：使用flex佈局
    • 方法4：設置僞元素
  • 塊級元素垂直居中
    • 方法1：flex佈局
    • 方法2：設置absolute和margin
    • 方法3：設置absolute和transform:translate(-50%,-50%)
• CSS垂直水平居中
  • 方法1：設置absolute和margin
  • 方法2：設置absolute和transform:translate(-50%,-50%)
  • 方法3：flex佈局

CSS水平居中

文本水平居中

設置：text-align: center

單個塊級元素（如：div）水平居中

設置 margin-left 和 margin-right爲 auto ; 例如：margin: 0 auto;
注意： 需要爲元素設置width寬度，否則元素寬度會被拉伸爲父級容器的寬度；

<div class="parent">
	<div class="child">
	  子元素
	</div>
</div>

.parent{
	width:300px;
	background: green;
}
.child{
	width:200px;
	background: red;
	margin: 0 auto;
}

多個水平排列的塊級元素 水平居中

方法一：使用flex佈局
方法二：子元素們外部嵌套一層div，設置margin-left 和 margin-right 爲 auto
效果圖：

方法一：flex佈局示例如下：
給父元素添加display: flex; 和 justify-content:center; 來使內部子元素水平居中

<div class="parent">
	<div class="child1">
	子元素1
	</div>
	<div class="child2">
	子元素2
	</div>
</div>

.parent{
	display: flex;
	justify-content:center;
	width:300px;
	background: green;
}
.child1{
	width:100px;
	background: red;
}
.child2{
	width:100px;
	background: pink;
}

多個垂直排列的塊級元素 水平居中

設置margin-left 和 margin-right 爲 auto
效果圖：

<div class="parent">
	<div class="child1">
	子元素1
	</div>
	<div class="child2">
	子元素2
	</div>
</div>

.parent{
	width:300px;
	background: green;
}
.child1{
	width:100px;
	background: red;
	margin: 0 auto;
}
.child2{
	width:100px;
	background: pink;
	margin: 0 auto;
}

CSS垂直居中

單行文本垂直居中

設置line-height和height相等（即高度和行高相等）
代碼示例：

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

.parent{
	width:200px;
	height: 50px;
	line-height: 50px;
	white-space: nowrap;  /* 不換行 */
	background: pink;
}

多行文本垂直居中

方法一：

父元素設置display:table；
子元素設置display:table-cell 和 vertical-align:middle

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

.parent{
	display: table;
	width:200px;
	height: 200px;
	background: pink;
}
.parent span{
	display: table-cell;
	vertical-align: middle;
}

方法二：

父元素:
設置對應的height和line-height

子元素:
設置display:inline-block屬性，使其轉化成行內塊元素，模擬成單行文本
設置vertical-align:middle屬性，使其基線對齊
設置line-height屬性，覆蓋掉 繼承自父元素的行高

<div class="parent">
	<p>多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中</p>
</div>

.parent{
	width:200px;
	height: 200px;
	line-height: 200px;
	background: pink;
}
p{
	display: inline-block;
	line-height: 20px;  /*單獨給子元素設置行高，覆蓋父級元素的行高*/
	vertical-align: middle; /*基線居中對齊*/
}

方法三：

使用flex佈局實現垂直居中

<div class="parent">
	<p>多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中</p>
</div>

.parent{
	display: flex;
	width:200px;
	height: 200px;
	justify-content: center; 
	flex-direction: column;
	background: pink;
}

方法四：

在垂直居中的元素上添加僞元素，設置僞元素的高等於父級容器的高，然後爲文本添加vertical-align: middle;樣式，即可實現垂直居中

<div class="parent">
	<p>多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中</p>
</div>

.parent{
	position: relative;
	width:200px;
	height: 200px;
	background: pink;
}
.parent::before{
	display: inline-block;
	content: " ";
	width: 1%;
	height: 100%;
	vertical-align: middle;
}
p{
	display: inline-block;
	vertical-align: middle;
	width: 190px;
}

塊級元素垂直居中

方法一：

使用flex佈局實現垂直居中（與前面的多行文本垂直居中方法三相同）
給父元素添加如下屬性即可：

display: flex;
flex-direction: column; 
justify-content: center;

方法二：

已知元素高度，可使用絕對定位absolute來實現：
（水平居中同理）

<div class="parent">
    <div class="child">子元素</div>
</div>

.parent{
	position: relative;
	width:200px;
	height: 200px;
	background: pink;
}
.child{
	position:absolute;
	top:50%;
	height:100px;
	margin-top:-50px;
	background: red;
}

方法三：

不知道元素的高度。可使用transform的translate屬性，將元素的中心和父容器的中心重合，從而實現垂直居中（水平居中同理）

<div class="parent">
	<div class="child">子元素</div>
</div>

.parent{
	position: relative;
	width:200px;
	height: 200px;
	background: pink;
}
.child{
	position: absolute; 
	top: 50%; 
	transform: translateY(-50%);
	background: red;
}

CSS垂直水平居中

可以通過將前面的技巧結合，來實現垂直水平居中的效果

方法一：

寬高固定，使用absolute和margin屬性來實現：

<div class="parent">
    <div class="child">子元素</div>
</div>

.parent{
	position: relative;
	width:200px;
	height: 200px;
	background: pink;
}
.child{
	position:absolute;
	top:50%;
	left:50%;
	width:100px;
	height:100px;
	margin-top:-50px;
	margin-left:-50px;
	background: red;
}

方法二：

寬高不固定，使用absolute和transform:translate(-50%,-50%)屬性來實現：

<div class="parent">
	<div class="child">子元素</div>
</div>

.parent{
	position: relative;
	width:200px;
	height: 200px;
	background: pink;
}
.child{
	position: absolute; 
	top: 50%; 
	left: 50%;
	transform: translate(-50%,-50%);
	background: red;
}

方法三：

使用flex佈局實現：

<div class="parent">
  <div class="child">子元素</div>
</div>

.parent{
	display: flex;
	justify-content: center;
	align-items: center;
	width:200px;
	height:200px;
	background: pink
}
.child{
	 background: red;
}

(´థ౪థ)σ有什麼不足之處，還請同行指點。
我會不斷的修改和完善！