浮动元素的垂直居中：话不多说直接上代码。
方法一：
<!doctype>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML</title>
<style type="text/css">
body{
position:relative;
width:500px;
height:500px;
border:1px solid blue;
margin:50px auto;
}
div{
position:absolute;
width:400px;
height:400px;
margin:auto;
top:0;
left:0;
right:0;
bottom:0;
background:red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>演示效果如下：
方法二：
<!doctype>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML</title>
<style type="text/css">
body{
position:relative;
width:500px;
height:500px;
border:1px solid red;
margin:50px auto;
}
div{
position:absolute;
width:400px;
height:400px;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-200px;
background:blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>演示效果如下：
以上就是我自己的两种浮动元素垂直居中的方法，不过要注意的是：上面的两种方法使用的时候浮动元素的父元素一定是相对定位。
扫一扫
2461
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
