div垂直居中，图片垂直居中

最新推荐文章于 2024-03-31 19:00:40 发布

thesameguo

最新推荐文章于 2024-03-31 19:00:40 发布

阅读量460

点赞数 1

文章标签： div垂直居中图片垂直居中

本文链接：https://blog.csdn.net/thesameguo/article/details/77163238

版权

div居中分为两种，一种是有固定宽高，一种是没有固定宽高
1.固定宽高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.test {
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
margin-left: -100px;
margin-top: -50px;
background-color: #000000;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
2.宽高不固定
(1)本人认为是最好的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.test {
position: absolute;
top: 50%;
left: 50%;
background-color: #000;
width:50%;
height: 80%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
(2)如果上面方法不行，可以考虑用这种：table方法，html新标签属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father {
display: table;
width: 100%;
height: 50%;
position: absolute;
background-color: red;
}
.chirdren {
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="father">
<div class="chirdren">
垂直居中
</div>
</div>
</body>
</html>
（3）css3,vertical-align方法。这种一般不可行，有局限，不怎么使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father {
text-align: center;
height: 50%;
position: absolute;
background-color: red;
}
.father:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.chidren {
display: inline-block;
vertical-align: middle;
width: 70%;
}
</style>
</head>
<body>
<div class="father">
<div class="chidren">
<p>垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中</p>
</div>
</div>
</body>
</html>
(4).如果都不行就使用最笨的方法，padding。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.test {
padding: 20%;
background-color: red;
}
</style>
</head>
<body>
<div class="test">
<p>垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中</p>
</div>
</body>
</html>
总结：总有一种方法适合你，给一些新手少走一些弯路，网上那些真的是回答真随意，解决不了问题，我还是比较喜欢直接给可用的代码，让新人自己去研究，这才是解决问题的根本
下面是图片垂直居中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.test{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="test"><img src="img/404.png" alt="" /></div>
</body>
</html>