让div等块级元素水平和垂直都居中,即永远处于屏幕的中间,比如登录页面时非常有用
1.要让div等块级元素水平和垂直居中,必需知道该div等块级元素的宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该div等块级元素分别左移和上移,左移和上移的大小就是该div等块级元素宽度和高度的一半。
.mydiv{
width:200px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -100px }
2.利用CSS的margin设置为auto让浏览器自己帮我们水平和垂直居中。
.mydiv{
position: absolute;
left: 0px;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 200px;
width: 200px;
}
3 jQuery实现水平和垂直居中
原理:jQuery实现水平和垂直居中的原理就是通过jQuery设置div等块级元素的CSS,获取div等块级元素的左、上的边距偏移量,边距偏移量的算法就是用页面窗口 的宽度减去该div等块级元素的宽度,得到的值再除以2即左偏移量,右偏移量算法相同。注意div等块级元素的CSS设置要在resize()方法中完成,就是每次改变窗口大 小时,都要执行设置div等块级元素的CSS。
$(window).resize(function(){
$(".myblock").css({
position: "absolute",
left: ($(window).width() - $(".myblock").outerWidth())/2,
top: ($(window).height() - $(".myblock").outerHeight())/2 });
});
在页面加载的时候调用刚刚创建的方法
$(function(){
$(window).resize();
});
4使用transform
.mydiv{
width: 100px;
height: 100px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}