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

方案一（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. Pdf File Writer 中文应用（PDF文件编写器C＃类库）

    该文由小居工作室(QQ:2482052910)    翻译并提供解答支持,原文地址:Pdf File Writer 中文应用(PDF文件编写器C#类库):http://www.cnblogs.com/ ...

  2. 道路修建 2（自创题+题解）（From NOI2011）

    道路修建这道题想来各位不陌生(传送门在此——Bzoj2435),看了此题,一开始以为是最初各个点处于分散状态,然后做了一下,直到发现标程都有点问题,才发现原题是说本来各点已经处于连接完毕的状态(phi ...

  3. 1651: [Usaco2006 Feb]Stall Reservations 专用牛棚

    1651: [Usaco2006 Feb]Stall Reservations 专用牛棚 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 566  Sol ...

  4. UINavigationBar统一修改导航条样式

    #pragma mark -- 统一导航条样式 //统一导航条样式 UIFont *font = [UIFont systemFontOfSize:19.f]; NSDictionary *textA ...

  5. AVFoundation之如何从摄像头获取图像

    前言: 最近项目有个需求是对试图对手机密码进行强破解的人进行拍照(通过摄像头截图),因为之前没做过,所以一堆坑.现在就把我的经验都分享出来,希望后来人不用再踏上坑途中. 直接上代码: // 创建会话 ...

  6. 20144306《网络对抗》MAL_逆向与Bof基础

    实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getShe ...

  7. nao安装中文包教程

    本文介绍nao离线安装中文包 相官方索取 .demo 文件夹,里面包含很多的例程和中文包 下载winscp和putty(或者xshell),下载过程和安装我就不多说了,免费 把nao开机,连接路由器等 ...

  8. 卸载php+apache+mysql

    一.卸载删除 mysql   1 sudo apt-get autoremove --purge mysql-server-5.0 2 sudo apt-get remove mysql-server ...

  9. iPhone 设置铃声

    每次设置后,长时间不玩就忘记了,把写成博客:好记性不如烂笔头: 第一步:下载喜欢的音乐: 第二步,通过iTunes 文件 下的资料库 导入刚才下载的歌曲: 第三步:截取喜欢的部分,铃声最好设置在30秒 ...

  10. Sublime安装Package Control插件

    一.简易安装 打开Sublime text的console.打开console的快捷时ctrl+,或者在菜单栏点击View->Show Sonsole`.打开后将下面的代码复制到console中 ...