/*实现一、原理:要让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. C++ - 库函数优先级队列(priority_queue)输出最小值 代码

    库函数优先级队列(priority_queue)输出最小值 代码 本文地址: http://blog.csdn.net/caroline_wendy 库函数优先级队列(priority_queue)的 ...

  2. MFC自己主动获取网络地址函数实现----广播地址,网关,子网掩码

    void CSetSignalBoxDlg::OnBnClickedButtonGetbroadcastaddr() {       //凝视部分为还有一种获取IP方式,可略过 //char Name ...

  3. 连通分量模板:tarjan: 求割点 &amp;&amp; 桥 &amp;&amp; 缩点 &amp;&amp; 强连通分量 &amp;&amp; 双连通分量 &amp;&amp; LCA(近期公共祖先)

    PS:摘自一不知名的来自大神. 1.割点:若删掉某点后.原连通图分裂为多个子图.则称该点为割点. 2.割点集合:在一个无向连通图中,假设有一个顶点集合,删除这个顶点集合,以及这个集合中全部顶点相关联的 ...

  4. Paypal支付(一)MPL真正的快捷支付

    一.前导 前面讲到了MEC支付,是在Web端集成好的,在手机端仅仅需通过WebView进行载入就可以,不须要不论什么Paypal第三方架包.以下将的是MPL支付.须要架包. 这样的支付的形式能够參考以 ...

  5. HDU 5416

    CRB and Tree                                       Time Limit: 8000/4000 MS (Java/Others)    Memory ...

  6. charset='utf8mb4'

    charset='utf8mb4' conn = pymysql.connect(host=h, port=pt, user=u, passwd=p, db=db, charset='utf8mb4' ...

  7. vijos - P1077克隆龙 (找规律 + 指数型母函数 + python)

    P1077克隆龙 Accepted 标签:[显示标签] 描写叙述 如今龙的克隆已成为可能,龙基因由ACTG字母组成,而龙的基因有例如以下特点: 1.A在基因中的出现为偶数次(包含0): 2.C的情况也 ...

  8. 以太网接口TCP/IP协议介绍,说的很容易懂了

      以太网接口TCP/IP协议介绍,说的很容易懂了  TCP/IP协议,或称为TCP/IP协议栈,或互联网协议系列. TCP/IP协议栈(按TCP/IP参考模型划分) 应用层 FTP SMTP HTT ...

  9. luence优化速度

    一. .索引优化背景 很多网站都有自己的搜索引擎,比如百度,搜狗等等,而他们每天添加的索引量可想而知多么庞大,所以为了能提升用户的搜索响应速度,好的优化方案必不可少:当然对于一些网站的站内搜索也很有必 ...

  10. CentOS 6.5下安装MySQL 5.6.21

    Linux中使用最广泛的数据库就是MySQL,使用在线yum的方式安装的版本落后MySQL网站好几个小版本,本节亲自测试安装新版的MySQL. 测试机器环境: VMware Workstation 1 ...