屏幕水平居中垂直居中

不管左边的盒子放大还是缩小，中间的盒子始终水平垂直居中

html:　

　　<div class="sidebar"><a href="###" class="click">点击缩小左侧导航宽度</a></div>
　　<div class="notebar">
　　　　<p>我始终在中间</p>
　　</div>

css:

　　.sidebar a {
　　　　color:#fff;
　　}
　　.sidebar {
　　　　background:blue;
　　　　width:210px;
　　　　height:100%;
　　　　position:fixed;
　　　　top:0;
　　　　left:0;
　　}
　　.notebar {
　　　　width:200px;
　　　　height:190px;
　　　　text-align:center;
　　　　background:red;
　　}
　　.notebar p {
　　　　margin:20px 0 0;
　　}

js:

　　$('.notebar').css('margin-left', ($(window).width() - $('.sidebar').width() - 200) / 2 + $('.sidebar').width());
　　$('.notebar').css('margin-top', ($(window).height() - 190) / 2);

　　$('.click').on("click", function() {
　　　　$('.sidebar').css('width', 50);
　　　　$('.notebar').css('margin-left', ($(window).width() - $('.sidebar').width() - 200) / 2 + $('.sidebar').width());
　　　　$('.notebar').css('margin-top', ($(window).height() - 190) / 2);
　　})

 

转载于:https://www.cnblogs.com/xiaofang-FE/p/6829357.html