一、如何让一个div在页面中垂直居中（请至少列出三种）
1.距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。
width:300px;
height:200px;
position:absolute;
left:50%
top:50%;
margin:-100px 0 0 -150px ;
2.使用jquery代码
$(window).resize(function(){
$(".mydiv").css({
position: "absolute",
left: ($(window).width() - $(".div").outerWidth())/2,
top: ($(window).height() - $(".div").outerHeight())/2
});
});
３．使用绝对定位；top,bottom,left,right分别都为零
父元素设置为：
width:800px;
height:500px;
border:2px solid #000;
position:relative;
子元素设置为：
width:200px;
height:200px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
４．（此方法在IE中可以实现只元素在父级元素中垂直居中，但在chrome中还没有实现水平居中），使用display:table-cell
父元素设置为：
width:800px;
height:500px;
border:2px solid #000;
display:table-cell;
vertical-align:middle;
text-align: center;
子元素设置为：
width:200px;
height:200px;
display:inline-block;
５．使用弹性布局的方式来解决
父级元素设置为
width:800px;
height:500px;
border:2px solid #000;
display:flex;
justify-content:center;
align-items:center;
子元素设置为：
width: 200px;
height: 200px;
background-color: red;
6.绝对定位和transfrom
style>
*{
padding: 0; margin: 0; } .box{ width: 300px; height: 300px; background:#e9dfc7; border:1px solid red; position: relative; } img{ width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } </style> <!--html --> <body> <div class="box" >  </div> </body>
4523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
