在 CSS 中對元素進行水平居中是非常簡單的：如果它是一個行內元素， 就對它的父元素應用 text-align:center; 如果它是一個塊級元素，就對它自身應用 margin:auto。還有沒有其他的方法呢，我們需要從一下兩個方面來討論：
- 文本垂直居中的方法
- 塊級元素垂直居中的方法
1.文本垂直居中的方法
文本垂直居中主要分爲單行文本和多行文本居中兩種。
A.單行文本垂直居中
1.方法：line-height=height （只需父級元素設置此代碼即可，較簡單，不再贅述）
2.方法：父級元素設置display:table; 子元素設置display:table-cell,並且設置vertical-align:middle.
案例1：單行文本垂直居中：display:table;+display:table-cell+vertical-align:middle;
<div class="box">
<p class="p">項目實戰中單行文本居中</p>
</div>
樣式文件
<style>
*{
margin: 0;
}
/*父級具有table的特性，子元素具備td，也就是單元格的特性，再搭配vertical-align:middle就可以實現垂直居中*/
.box{
display: table;
width: 600px;
height: 500px;
margin: 50px auto;
border: 1px solid red;
text-align: center;
/*line-height: 500px;*/
}
.p{
display: table-cell;
vertical-align: middle;
}
</style>
效果圖：
B.多行文本垂直居中
1. 方法 ： display:table;+display:table-cell+vertical-align:middle; （使用方法同上）
2.方法 ： display:inline-block;+display:inline-block;+vertical-align:middle;
案例2：多行文本垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素垂直居中的探究</title>
<style>
*{
margin: 0;
}
.box1{
width: 500px;
height: 500px;
margin: 50px auto;
border: 1px solid #000;
text-align: center; /*水平居中*/
}
.p1{
display: inline-block; /*p1具有行內塊*/
vertical-align: middle; /*垂直居中*/
}
span{
display: inline-block; /*行內塊*/
height: 100%;
border: 1px solid #000;
vertical-align: middle;/*垂直居中*/
}
</style>
</head>
<body>
<div class="box1">
<p class="p1">項目實戰中單行文本居中 <br> 項目實戰中多行文本居中 <br>項目實戰中多行文本居中</p>
<span></span>
</div>
</body>
</html>
效果圖
2.塊級元素垂直居中
a.子絕父相定位與邊距負值
b.內邊距操作
c.絕對定位與外間距自動操作
d.浮動盒子
e.Flex佈局
案例3：塊元素居中的各種方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
width: 500px;
height: 500px;
margin: 50px auto;
background: #000;
}
.sub{
width: 200px;
height: 200px;
background: #00a080;
}
/* a.子絕父相定位與邊距負值*/
.wrap1{
position: relative;
width: 500px;
height: 500px;
margin: 50px auto;
background: #000;
}
.sub1{
position: absolute;
top: 50%;
left: 50%; /*通過設置top和left:50%，會使子元素左上頂點與父級元素中心點重合 */
margin: -100px 0 0 -100px; /*子元素寬度的一半*/
width: 200px;
height: 200px;
background: #00a080;
}
/* b. 內邊距操作
父元素設置box-sizing: border-box;
padding設置爲（父級元素寬-子元素寬）/2
*/
.wrap2{
width: 500px;
height: 500px;
margin: 50px auto;
background: #000;
padding: 150px; /* 通過設置父級盒模型寬度計算方式，及padding可以實現塊級元素居中*/
box-sizing: border-box;
}
.sub2{
width: 200px;
height: 200px;
background: #00a080;
}
/*
c. 絕對定位與外間距自動操作
這種方式不常用*/
.wrap3{
position: relative;
width: 500px;
height: 500px;
margin: 50px auto;
background: #000;
}
.sub3{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 200px;
height: 200px;
background: #00a080;
}
/* d.浮動盒子*/
.wrap4{
width: 500px;
height: 500px;
margin: 50px auto;
background: #000;
}
.floater{
float: left;
width: 100%;
height: 50%;
margin-bottom: -100px;/*下方元素寬度的一半*/
border: 1px solid #fff;
}
.sub4{
clear: both;
margin: 0 auto;/*水平居中*/
width: 200px;
height: 200px;
background: #00a080;
}
/* e. flex佈局
因爲涉及到兼容性問題，在pc端用的較少一些
移動端，flex佈局居中是很好的選擇
*/
.wrap5{
display: flex;
justify-content: center;
align-items: center;
width: 500px;
height: 500px;
margin: 50px auto;
background: #000;
}
.sub5{
width: 200px;
height: 200px;
background: #00a080;
}
/*圖片垂直居中顯示*/
.wrap6{
width: 500px;
height: 500px;
margin: 50px auto;
border: 1px solid red;
line-height: 500px;
text-align: center;
}
.wrap6>img {
width: 200px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="wrap">
<div class="sub"></div>
</div>
<div class="wrap1">
<div class="sub1">
</div>
</div>
<div class="wrap2">
<div class="sub2">
</div>
</div>
<div class="wrap3">
<div class="sub3">
</div>
</div>
<div class="wrap4">
<div class="floater"></div>
<div class="sub4">
</div>
</div>
<div class="wrap5">
<div class="sub5">
</div>
</div>
<div class="wrap6">
<img src="img/cont2.png" alt="">
</div>
</body>
</html>
效果圖：
