一、css元素垂直居中初始状态
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css元素垂直居中</title> <style type="text/css"> .wrapper{ background-color: #f24444; width: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; width: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; width: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; width:200px; height:200px; margin:0px auto; text-align:center; position:relative;}.content{ position:absolute; top:50%; left:50%; height:30%; width:50%; margin:-15% 0 0 -25%;}
五、绝对定位与margin扩展
.wrapper{ background-color: #f24444; width:200px; height:200px; margin:0px auto; text-align:center; position:relative;}.content{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 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%; width:100%; margin-bottom:-50px;}.content{ clear:both; height:100px;}
时间： 2024-08-24 16:54:47