专栏首页Java后端技术让div等块级元素水平以及垂直居中的解决办法

让div等块级元素水平以及垂直居中的解决办法

一、背景

  我们在设计页面的时候,经常要把div等块级元素居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让div等块级元素居中。在本文中,我将给大家讲述如何用CSS和jQuery两种方法让div等块级元素水平和垂直居中。

二、解决办法

1.CSS让div等块级元素水平居中

 原理:让一个div等块级元素水平居中,直接用CSS就可以做到。只要设置了div等块级元素的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得div等块级元素居中。

 CSS代码:

.mycss{   
    margin:0 auto;   
    width:300px;   
    height:200px;   
} 

但是如果要使div等块级元素垂直方向也居中,恐怕CSS需要修改了。

2.CSS让一行内容垂直居中显示

 原理:当我们设置该行元素的高度和行高相同时,CSS会让它自动垂直居中显示。

 CSS代码:

  .mycss{ 
     height:200px; 
     line-height:20px; 
}

3.让div等块级元素水平和垂直都居中,即永远处于屏幕的正中央,当我们做如登录块时非常有用!

 实现一、原理:要让div等块级元素水平和垂直居中,必需知道该div等块级元素的宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该div等块级元素分别左移和上移,左移和上移的大小就是该div等块级元素宽度和高度的一半。

   CSS代码:

.mycss{ 
   width:300px;  
   height:200px;  
   position:absolute;  
   left:50%;  
   top:50%;  
   margin:-100px 0 0 -150px 
} 

该方法使用普遍,但是前提是必需设置div等块级元素的宽度和高度。如果当页面div等块级元素宽度和高度是动态的,比方说需要弹出一个div等块级元素元素层并且要居中显示,div等块级元素的内容是动态的,所以宽度和高度也是动态的,这时需要用jQuery可以解决居中。

   实现二原理:利用CSS的margin设置为auto让浏览器自己帮我们水平和垂直居中。

   CSS代码:

.mycss{
    position: absolute;
    left: 0px;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 200px;
    width: 300px;
}

4.jQuery实现水平和垂直居中

 原理:jQuery实现水平和垂直居中的原理就是通过jQuery设置div等块级元素的CSS,获取div等块级元素的左、上的边距偏移量,边距偏移量的算法就是用页面窗口 的宽度减去该div等块级元素的宽度,得到的值再除以2即左偏移量,右偏移量算法相同。注意div等块级元素的CSS设置要在resize()方法中完成,就是每次改变窗口大 小时,都要执行设置div等块级元素的CSS。

 jquery代码:

$(window).resize(function(){ 
    $(".myblock").css({ 
        position: "absolute", 
        left: ($(window).width() - $(".myblock").outerWidth())/2, 
        top: ($(window).height() - $(".myblock").outerHeight())/2 
    });        
});

此外在页面载入时,就需要调用resize()方法

$(function(){ 
    $(window).resize(); 
});

此方法的好处就是不需要知道div等块级元素的具体宽度和高度大小,直接用jQuery就可以实现水平和垂直居中,而且兼容各浏览器,这个方法在很多的弹出层效果中应用。

 tips:在页面的外面建一个table,设置高度为100%,然后设置td垂直居中显示,把页面套进去就OK拉!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery中dom元素的attr和prop方法的理解

      在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候,经常不知道dom元素的attr和pro...

    阿豪聊干货
  • 你敢说自己了解单例模式?

      最近在学习设计模式,在看到单例模式的时候,我一开始以为直接很了解单例模式了,实现起来也很简单,但是实际上单例模式有着好几个变种,并且多线程中涉及到线程安全问...

    阿豪聊干货
  • CSS总结

      1.继承:子元素继承父元素的某些样式(因为有些元素有默认值,所以它们就不用继承父元素的)。

    阿豪聊干货
  • 机器学习入门 5-3 简单线性回归的实现

    本系列是《玩转机器学习教程》一个整理的视频笔记。本小节主要介绍实现简单的线性回归。

    触摸壹缕阳光
  • Java中,局部内部类

    局部内部类 A:局部内部类可以直接访问外部类的成员。 B:局部内部类在局部位置可以创建内部类对象,通过内部类对象调用内部类方法,来使用局部内部类功能。 ...

    黑泽君
  • 来一份Python学习题

    3*2**2的输出是多少?(1分) 8 % 4的输出是多少?(1分) 32 + '32'的输出是什么?(1分) 32 > '32'的输出是什么?(1分) 'Sh...

    生信宝典
  • 干货|6款数据挖掘工具,让你的工作效率UP!

    工欲善其事,必先利其器。踏入大数据时代,你的“工具”跟上时代了吗?在数据挖掘过程中,有大量的工具可供使用,比如采用人工智能、机器学习,以及其他技术等来提取数据...

    灯塔大数据
  • python基础及函数1

    Python的程序执行方式:Python的程序编辑窗口、Python的解释器提示符。

    py3study
  • 记一次RabbitMQ(3.8版本)在liunx下安装

    吴文周
  • 元数据核心架构解析(PPT)

    ? 大家好,很高兴在这里和大家探讨和分析元数据管理的技术和想法。本次分享的内容包括以下三部分: ? 首先,通过以下这张片子我们先看一下传统元数据管理都在管...

    yuanyi928

扫码关注云+社区

领取腾讯云代金券