/*实现一、原理:要让div等块级元素水平和垂直居中,必需知道该div等块级元素的宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,
这个50%就是指页面窗口的宽度和高度的50%,最后将该div等块级元素分别左移和上移,左移和上移的大小就是该div等块级元素宽度和高度的一半。该方法使用普遍,
但是前提是必需设置div等块级元素的宽度和高度。如果当页面div等块级元素宽度和高度是动态的,比方说需要弹出一个div等块级元素元素层并且要居中显示,
div等块级元素的内容是动态的,所以宽度和高度也是动态的,这时需要用jQuery可以解决居中。*/
.mycss{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px
} /*实现二原理:利用CSS的margin设置为auto让浏览器自己帮我们水平和垂直居中*/
.mycss{
position: absolute;
left: 0px;
right:;
top:;
bottom:;
margin: auto;
height: 200px;
width: 300px;
}

DIV水平 垂直居中CSS的更多相关文章

  1. DIV水平垂直居中的CSS兼容写法

    DIV水平垂直居中,非IE浏览器可以用CSS3来处理,IE浏览器中分别处理IE6和/IE7.IE8.IE9. 在IE低版本中,虽然大致上没有问题,但还是有一些细微的显示问题. 示例如下: <!D ...

  2. 【最全】CSS盒子(div)水平垂直居中居然还有这种方式

    最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...

  3. 如何让div水平垂直居中

    引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...

  4. 文字以及div水平垂直居中

    文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...

  5. 【笔记】让DIV水平垂直居中的两种方法

    今天写的了百度前端学院春季班的任务:定位和居中问题  由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...

  6. scss : div水平垂直居中

    scss 是一个很好用的css预处理语言,有很多很好的特性. 比如 mixin. 我们可以像使用函数那样使用mixin. 比如写一个div水平垂直居中. 上代码. @mixin absolute_ce ...

  7. Div水平垂直居中的三种方法

    百度了很多种方法,很多是不起作用的.下面这些方法是我亲自试过的.希望对大家有帮助! 下面是一波代码水军. <!DOCTYPE html> <html lang="en&qu ...

  8. css实现div水平垂直居中

    中秋快到了,祝大家中秋快乐. 平时大家写bug过程中肯定会遇到让div框水平或者垂直居中,然而有时候能居中,有时候不能居中.我把平时遇到的一些方法写出来,如果对你有用,那便是晴天. 1.text-al ...

  9. 【html】【10】div布局[div水平垂直居中]

    必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为: .style{margin:0 auto;} 数字0 表示上下边距是0.可以按照需要设置 ...

随机推荐

  1. Xcode iOS9.3 配置包 iOS10.0 配置包 iOS10.2 配置包 could not find developer disk image

    在Finder状态下前往目录.快捷键:shift+command+G,填写路径/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS ...

  2. antd 的 Table 遇到的 bug

    1.报错情况 /* autoprefixer: off */ filter: progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, Mak ...

  3. 传智播客ADO.Net项目开发教程具体解释

    内容简单介绍: 本教程为传智播客.Net培训课堂的现场录像,请到140623ls" target="_blank">传智播客.Net学院下载很多其它免费.Net视频 ...

  4. hdu4057 Rescue the Rabbit(AC自己主动机+DP)

    Rescue the Rabbit Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...

  5. String,StringBuffer,StringBuilder三者有什么异同?

    相同点: 1.三者都是Java平台提供的三种类型得到字符串,它们可以储存和操作字符串. 不同点: 1.String是final修饰的,也就意味着String引用的字符串内容是不能被改变的.而Strin ...

  6. 使用 dva + antd 快速开发react应用

    使用 dva + antd 快速开发react应用 版本说明: 注意:dva的版本是0.9.2 $ node -v v10.2.1 $ npm -v $ dva -v dva-cli version ...

  7. Android合并两个APP的详细做法(掌握)

    有时候因公司需求,要求合并两个APP 使用里面的功能. 平台:Studio 小白鼠:二维码扫描 和自己项目 详细步骤: /**  * 1.将解压后的android/assets目录复制到项目中的mai ...

  8. http使用代理

    直接上代码: HttpUrlConnection使用代理: private static HttpURLConnection getConnection(URL url, String method, ...

  9. shell脚本,根据字符串获取行号的

    awk中不能解析shell变量,建议做法是通过-v传递进去: 1 typeline=`cat $typepath | awk -v str="$typetmp" '/str/{pr ...

  10. [Android6.0][RK3399] 双屏异显代码实现流程分析(二)【转】

    本文转载自:http://blog.csdn.net/dearsq/article/details/55050125 Patch Code dtsi rk3399-androiddtsi rk3399 ...