在 CSS 中对元素进行水平居中是非常简单的：如果它是一个行内元素， 就对它的父元素应用 text-align:center; 如果它是一个块级元素，就对它自身应用 margin:auto。还有没有其他的方法呢，我们需要从一下两个方面来讨论：
文本垂直居中主要分为单行文本和多行文本居中两种。
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>效果图
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>效果图：
