16种css水平垂直居中方法以及应用（文字、图片）
一、垂直居中
1、行内元素
基本思想：单行文本子元素line-height 值为父元素 height 值
.parent {
height: 200px;
}
.son {
line-height: 200px;
}
2、块级元素
2.1行内块级元素
基本思想：元素是行内块级，使用display: inline-block, vertical-align: middle+伪元素处于容器*
兼容性：支持IE7
.parent::after, .son{
display:inline-block;
vertical-align:middle;
}
.parent::after{
content:'';
height:100%;
}
2.2table布局
兼容性：支持IE6/IE7，IE8无效
.parent {
display: table;
}
.son {
display: table-cell;
vertical-align: middle;
}
2.3flex弹性布局
2009版写法
兼容性：不支持IE
.parent {
display: box;
box-orien: vertical;
box-pack: center;
}
2012版写法
兼容性：IE8/IE9不支持
.parent{
display:flex;
justify-content:center;
}
.son{
align-self:center;
}
2.4绝对定位+transform:translate(-50%,-50%)
.parent{
position:relative;
}
.son{
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
二、水平居中
1、行内元素
基本思想：父元素设置text-align: center即可实现行内元素水平居中
.parent {
text-align: center;
}
2、块级元素
2.1一般居中
基本思想：该元素设置margin:0 auto
.son {
margin: 0 auto;
}
2.2子元素含float
基本思想：子元素包含 float:left 属性, 让父元素宽度设置为fit-content,并且配合margin，fit-content是css3的新属性值
.parent{
width:fit-content;
margin:0 auto;
}
.son {
float: left;
}
2.3 flex弹性布局
2009版本写法
.parent{
display:box;
box-orient:horiaontal;
box-pack:center;
}
2012版写法
.parent{
display:flex;
justify-content:center;
}
2.4绝对定位
- transform
.son{
position:absolute;
left:50%;
transform:translate(-50%,0);
}
- 负值margin-left
.son{
position:absolute;
with:固定宽度
left:50%;
margin-left:-0.5*固定宽度;
}
- left:0;right:0;margin:0 auto
.son{
position:absolute;
width:固定宽度;
left:0;
right:0;
margin:0 auto;
}
三、具体应用–文字居中
3.1css如何设置文字水平居中
基本思想：css使用text-align规定水平对齐方式，影响一个元素的文本行相互的对齐方式。center值设置文本居中
注意：text-align应用与容器，针对容器里面的文字以及容器里面的display:inline/inline-block，若是display:block无影响
text-align具备向下传递的特点，设置一个div，div里面的也会居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 500px;
height: 80px;
background: rgb(228, 178, 187);
text-align: center;
}
</style>
</head>
<body>
<div class="box">css 水平居中了--文本文字</div>
</body>
</html>
3.2css如何设置文字垂直居中
- 单行文本：基本思想是行高（line-height）和所在区域高度（height）设置一致
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 500px;
height: 80px;
background: rgb(228, 178, 187);
line-height: 80px;
}
</style>
</head>
<body>
<div class="box">css 垂直居中--单行文本</div>
</body>
</html>
- 多行文本
（1）当父级元素高度不固定
当父级元素不固定，会随着内容变化，高度只能通过文本的高度来撑开，所以需要使用内填充padding来使多行文本居中。只需要设置padding-top的值与padding-bottom的值相等
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 500px;
margin: 50px auto;
background: rgb(228, 178, 187);
padding-top: 50px;
padding-bottom: 50px;
padding-right: 20px;
padding-left: 20px;
}
</style>
</head>
<body>
<div class="box">css 垂直居中--多行文本--父级高度不固定</div>
</body>
</html>
（2）当父级元素高度固定
vertical-align:middle +display:table-cell
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 500px;
height: 100px;
background: rgb(228, 178, 187);
vertical-align: middle;
display: table-cell;
}
</style>
</head>
<body>
<div class="box">css 垂直居中--多行文本--父级高度固定</div>
</body>
</html>
四、具体引用–图片居中
4.1display：table
基本思想：最外层div display: table+img父元素display: table-cell、vertical-align: middle
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 300px;
height: 200px;
background: rgb(228, 178, 187);
display: table;
}
#imgbox {
display: table-cell;
vertical-align: middle;
}
#imgbox img {
width: 200px;
}
</style>
</head>
<body>
<div class="box">
<div id="imgbox">
<img src="" alt="图片1">
</div>
</div>
</body>
</html>
思考：如何在图片垂直居中基础上+水平居中
基本思想：最外层div text-align: center（具有向下传递的特点）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 300px;
height: 200px;
background: rgb(228, 178, 187);
display: table;
text-align: center;/*增加的一行代码*/
}
#imgbox {
display: table-cell;
vertical-align: middle;
}
#imgbox img {
width: 200px;
}
</style>
</head>
<body>
<div class="box">
<div id="imgbox">
<img src="" alt="图片1">
</div>
</div>
</body>
</html>
4.2flex实现
基本思想：display: flex;align-items: center
兼容性：不是最好的选择，IE8/IE9不支持
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.imgbox {
width: 300px;
height: 200px;
background: rgb(228, 178, 187);
display: flex;
align-items: center;
}
.imgbox img {
width: 150px;
height: 100px;
align-items: center;
}
</style>
</head>
<body>
<div class="imgbox">
<img src="" alt="图片1">
</div>
</body>
</html>
4.3绝对定位
基本思想：img父元素相对定位position: relative+子元素绝对定位position: absolute，img的top设置为50%，负值margin-top（这个是想实现垂直居中元素高度的一半），不确定高度用transform:translateY(-50%)
兼容性：推荐写法，兼容性好
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.imgbox {
width: 300px;
height: 200px;
background: rgb(228, 178, 187);
position: relative;
margin: 0 auto;
}
.imgbox img {
width: 150px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="imgbox">
<img src="" alt="图片1">
</div>
</body>
</html>
