1、单行文字的垂直居中
对于单行文本我们可以设置line-height和height
的值相等就可以实现垂直居中。
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.text {
height: 100px;
line-height: 100px;
width: 200px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="text">CSS实现文本垂直居中</div>
</body>
</html>
运行结果:
2、多行文本的垂直居中
语法:
父元素{
display:table-cell;
vertical-align:middle;
}
span{
display:inline-block;
}
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.box {
width: 200px;
height: 200px;
display: table-cell;
vertical-align: middle;
border: 1px solid black;
}
span{
display: inline-block;
}
</style>
</head>
<body>
<p class="box">
<span>
送杜少府之任蜀州<br />
城阙辅三秦,风烟望五津。<br />
与君离别意,同是宦游人。<br />
海内存知己,天涯若比邻。<br />
无为在歧路,儿女共沾巾。<br />
</body>
</html>
运行结果:
3、块元素(block)的垂直水平居中
对于高度已知的块元素,可以用万能的"position"方法来实现。使用该方法父元素和子元素都必须定义宽度和高度。(position方法还可以用于inline、
inline-block元素)
/*
若想单独实现垂直居中,去掉left和margin-left这两个属性。
若想单独实现水平居中,去掉top和margin-top这两个属性。
*/
语法:
父元素{
position:relative;
}
子元素{
position:absolute;
top:50%;
left:50%;
margin-top:height一半的负值;
margin-left:width一半的负值;
}
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.box {
position: relative;
width: 300px;
height: 300px;
border: 1px solid black;
}
.text {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
background-color: coral;
}
</style>
</head>
<body>
<div class="box">
<div class="text"></div>
</div>
</body>
</html>
运行结果:
3、行内块元素的垂直居中
对于行内块元素的垂直居中,可以使用"display:table-cell"结合
"vertical-align:middle"实现。
语法:
父元素{
display:table-cell;
vertical-align:middle;
}
子元素{
vertical-align:middle;
}
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.box {
display: table-cell;
vertical-align: middle;
width: 300px;
height: 400px;
border: 1px solid black;
}
img{
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
<img src="images\图标素材\177.png" alt="">
</div>
</body>
</html>
运行结果: