块级元素⽔平垂直居中的四种⽅法
让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;
css设置文字垂直居中}
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%);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。