2-13编程，通知此方法实现了大概布局，怎么实现垂直居中？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
ul li{
list-style: none;

}

.main{
width: 960px;
/*height: 100px;*/
margin: 0 auto;
background-color: #ADD8E6;
}
/* .header{
margin: 20px 0;
}*/
.left-pic,.right-pic{
width: 50%;
}
.left-pic{
float: left;
}
.left-pic img{
margin: 20px 0px 20px 80px;
}
.right-pic img{
margin: 20px 0px 20px 40px;
}
.right-pic{
float: right;

}
.footer{
clear: both;
background-color: pink;
/*padding: 20px 100px;*/
padding:40px 0;
}
.footer ul{
margin-left: 80px;
}
.footer ul li{

display: inline;
margin-right: 80px;
/*margin: 40px 100px 40px 100px;*/
}
</style>
</head>
<body>
<div class="main">
<div class="header">
<div class="left-pic">
<img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg">
</div>
<div class="right-pic">
<img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg">
</div>
</div>
<div class="footer">
<ul>

<li><img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg"></li>
<li><img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg"></li>
<li style="float: right;"><img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg"></li>
</ul>
</div>
</div>

</body>
</html>

装完B就跑_真刺激 2018-01-09

源自：CSS网页布局基础 2-14 编程练习

收起

3回答

好帮手慕糖回答被采纳获得+3积分 2018-01-09 13:53:39

你好，不加的话，默认值是 left: 0; top: 0; 所以会在左上角；

祝学习愉快~

收起回答

装完B就跑_真刺激提问者 #1

了解了，非常感谢！

2018-01-09 14:25:06

好帮手慕糖 2018-01-09 13:38:18

你哈，这是两种不同的方法，也可以参考下下列方法。

.main {
    width: 960px;
    height: 400px;
    background-color: #ADD8E6;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto auto;
}

祝学习愉快~

收起回答

提问者装完B就跑_真刺激 #1

这种也可以哦，是我没加 left: 0; right: 0; top: 0; bottom: 0; 老师能给解释下为什么一定要加上上下左右的限制为0，就能实现居中，而不加的话就会出现在左上角，有点不理解？

2018-01-09 13:48:11

好帮手慕糖 2018-01-09 11:40:58

你好，是指图片垂直居中？还是整体垂直居中？图片的话，已经实现了相对于父元素垂直居中，若想设置整体居中居中的话，可以给父级设置个高度，然后使用定位来完成，例：

祝学习愉快~

收起回答

提问者装完B就跑_真刺激 #1

里面第一层是main，外层就是body了，我试了margin: auto auto;结果偏移到左上角了，不知道问什么？使用了以下方法感觉可以： .main{ width: 960px; height: 402px; /*margin: 0 auto;*/ background-color: #ADD8E6; position: absolute; /*margin: auto auto;*/ /*top: 50%; left: 50%; margin-top: -202px; margin-left: -480px;*/ }

2018-01-09 12:02:38