一、css元素垂直居中初始状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css元素垂直居中</title>
<style type="text/css">
.wrapper{
background-color: #f24444;
200px;
height:200px;
margin:0px auto;
text-align:center;
}
/* .content{
line-height:200px;
}*/
</style>
</head>
<body>
<div class="wrapper">
<div class="content">世上无难事，只怕有心人。</div>
</div>
</body>
</html>
二、1、line-height文本垂直居中
.content{
line-height:200px;
}
2、line-height图片垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css元素垂直居中</title>
<style type="text/css">
.wrapper{
background-color: #f24444;
200px;
height:200px;
margin:0px auto;
text-align:center;
}
.content{
line-height:200px;
}
.content img{
vertical-align: middle;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content"><img src="s2.png"></div>
</div>
</body>
</html>
三、table方法垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css元素垂直居中</title>
<style type="text/css">
.wrapper{
background-color: #f24444;
200px;
height:200px;
margin:0px auto;
text-align:center;
display:table;
}
.content{
display:table-cell;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">世上无难事，只怕有心人</div>
</div>
</body>
</html>
四、1、绝对定位与负位移垂直居中
.wrapper{
background-color: #f24444;
200px;
height:200px;
margin:0px auto;
text-align:center;
position:relative;
}
.content{
position:absolute;
top:50%;
left:50%;
height:30%;
50%;
margin:-15% 0 0 -25%;
}
五、绝对定位与margin扩展
.wrapper{
background-color: #f24444;
200px;
height:200px;
margin:0px auto;
text-align:center;
position:relative;
}
.content{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
50%;
height: 30%;
margin: auto;
}
六、padding垂直居中
.wrapper{
background-color: #f24444;
margin:0px auto;
text-align:center;
padding:5% 0;
}
.content{
padding:10% 0;
}
七、浮动方法垂直居中
.wrapper{
background-color: #f24444;
text-align:center;
height:250px;
}
.floater{
float:left;
height:50%;
100%;
margin-bottom:-50px;
}
.content{
clear:both;
height:100px;
}
