在开发中偶遇需要一个元素垂直居中的需求，之前都是水平居中，垂直居中使用的比较少，经过一通研究，选择了几种相对比较实用的方案分享，抛砖引玉，如有遗漏不足，还望不吝指正。

方案一（IE7下该方案无法实现垂直居中）：

通过设置父级的的块属性实现，将父级元素手动转换位display:table-cell属性，然后使用表格的vertical-align: middle属性，实现元素的垂直居中，子元素继续使用margin:0 auto;实现水平居中即可

代码如下：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         .container{

             width: 500px;

             height: 500px;

             display: table-cell;

             vertical-align: middle;

             background: green;

         }

         .box{

             width: 100px;

             height: 100px;

             background: #f00;

             margin: 0 auto;

         }

     </style>

 </head>

 <body>

 <div class="container">

     <div class="box"></div>

 </div>

 </body>

 </html>

方案二（IE7下该方案无效）：

使用position:absolute,设置left、top、bottom、right、margin的属性

代码如下：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         .box{

             width: 100px;

             height: 100px;

             background: #f00;

             position: absolute;

             top: 0;

             left: 0;

             bottom: 0;

             right: 0;

             margin: auto;

         }

     </style>

 </head>

 <body>

 <div class="box"></div>

 </body>

 </html>

方案三（完美兼容）：

使用position:absolute,设置left、top、margin-left、margin-top的属性，这种方法基本浏览器都能够兼容，不足之处就是需要固定宽高。

代码如下：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         .box{

             width: 100px;

             height: 100px;

             background: #f00;

             position:absolute;

             top:50%;

             left:50%;

             margin-top:-50px;

             margin-left:-50px;

         }

     </style>

 </head>

 <body>

 <div class="box"></div>

 </body>

 </html>

css系列（布局）：实现一个元素在浏览器中水平、垂直居中的几个方案的更多相关文章

  1. 用 CSS Grid 布局制作一个响应式柱状图

    最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案.开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid. 今天和大家分享我学到 ...

  2. 【CSS系列】块级元素和行内元素

    块级元素: 块级元素生成一个元素框,默认会填充其父元素的内容区,旁边不能有其他元素,换句话说,它在元素框之前和之后生成了“分隔符”. 列表项是块级额元素的一个特例,除了表现方式与其他块元素一致,列表项 ...

  3. 获取元素在浏览器中的绝对位置（从jquery1.8中抠出来）

    <style> html,body{margin:0;padding:0;} .d1{margin-left:40px;background:red;width:2000px;height ...

  4. css两种常用的不定宽高的水平垂直居中方法，记住它，不再为样式发愁

    css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...

  5. CSS实现图片在div a标签中水平垂直居中

    CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...

  6. 【css系列】六种实现元素水平居中方法

    一.前言 居中效果在CSS中很是普通的效果,平时大家所看到的居中效果主要分为三大类:水平居中.垂直居中和水平垂直居中.而其中水平居中相对于后两者来说要简单得多.使用了css3的flexbox的属性轻松 ...

  7. CSS子元素在父元素中水平垂直居中的几种方法

    1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 3 ...

  8. css flew 布局 解决父元素高度不固定，子级居中。

    给父级添加 display: flex; justify-content: flex-start; align-items: center; 子级里的内容永远居中

  9. jquery 获取元素在浏览器中的绝对位置

    代码详解 1,获取对象(自定义调整打开新窗口参照元素) var obj = $("#oButton"); 实例中我获取的对象是弹出窗口按钮,这样创建的新窗口就会根椐按钮的位置进行调 ...

随机推荐

  1. Linux服务器下Java环境搭建

    前言: 在centOS下,像阿里云等都预先设置了jdk,不过不是SUN的java JDK,一般情况要重新装jdk,而且一般情况下自己装的Jdk相对来说易控制版本,稳定性更高.所以以下是我卸载预装jdk ...

  2. 1648: [Usaco2006 Dec]Cow Picnic 奶牛野餐

    1648: [Usaco2006 Dec]Cow Picnic 奶牛野餐 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 432  Solved: 270[ ...

  3. Postgresql 经纬度

    增加一列: add column `location` geometry default p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px &q ...

  4. python实现TCP/UDP通信

    一.说明 对于TCP/udp的说明已经很多了,我在这里只是简单的说明一下 二.套接字scoket 套接字是一种具有之前所说的"通信端点"概念的计算网络数据结构.相当于电话插口,没它 ...

  5. HTML页面内容禁止选择、复制、右键

    <body leftmargin=0 topmargin=0 oncontextmenu='return false' ondragstart='return false' onselectst ...

  6. otool介绍（转http://www.mc2lab.com/?p=68）

    1. Otool简介 Otool可以提取并显示ios下目标文件的相关信息,包括头部,加载命令,各个段,共享库,动态库等等.它拥有大量的命令选项,是一个功能强大的分析工具,当然还可以做反汇编的工具使用. ...

  7. Java引领新生活

    阅读邹欣老师的博客,谈谈你期望的师生关系是什么样的? 我觉得师生关系应当是亲密无间,课上老师讲解学生配合,课下师生交流启发思考. 你有什么技能(学习,棋类,球类,乐器,艺术,游戏,......)比大多 ...

  8. 如何javascript获取css中的样式

    obj.style.height只能获取行间样式,但是我们要怎么获取写在css文件中的样式呢? 首先我们要用一个新的方法currentStyle.这个方法由current和style两个单词组成意思是 ...

  9. JavaScript重新介绍

    本文转载自 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript 引言 为什么 ...

  10. NoSQL注入的分析和缓解

    本文要点介绍: 1.了解针对NoSQL的新的安全漏洞 2.五类NoSQL攻击手段,比如重言式.联合查询.JavaScript 注入.背负式查询(Piggybacked queries),以及跨域违规 ...