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

方案一（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. 10条建议让你创建更好的jQuery插件

    在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式.这样我就可以 copy & paste 大部分的代码结构,只要专注最主要的逻辑代码就行了.使 ...

  2. JavaWeb---javabean

    1.javabean 1.1--javabean的创建方法 1.2-javabean可以使用跟java一样的方法创建javabean实例 创建一个普通类Users(1.共有类 2.私有属性 3.无参构 ...

  3. c/c++重定向输入输出

    #define Local #include <iostream> #include <cstdio> //#include <stdio.h> using nam ...

  4. IIS HTTP 错误 500.19 - Internal Server Error HTTP 错误 401.3 - Unauthorized 解决办法

    前言:IIS是一个强大的服务器管理器,当遇到 IIS HTTP 错误 500.19 - Internal Server Error  HTTP 错误 401.3 - Unauthorized 的解决办 ...

  5. javascript解析机制、闭包详解

    js解析机制: js代码解析之前会创建一个如下的词法环境对象(仓库):LexicalEnvironment{ } 在扫描js代码时会把: 1.用声明的方式创建的函数的名字: 2.用var定义的变量的名 ...

  6. 更加 "深入" 理解多态

    1.1 public abstract class Birds{ //什么样的方法是抽象方法 public abstract void Fly(); } public class YZ:Birds{ ...

  7. Javascript动态创建 style 节点

    有很多提供动态创建 style 节点的方法,但是大多数都仅限于外部的 css 文件.如何能使用程序生成的字符串动态创建 style 节点,我搞了2个小时. 静态外部 css 文件语法: @import ...

  8. Linux下python开发环境的准备

    升级python 安装依赖: yum install lrzsz zlib zlib-devel  openssl  readline-deve gcc  ibffi-devel python-dev ...

  9. pip --upgrade批量更新过期的python库

    pip --upgrade批量更新过期的python库 python pip 转载请标明出处:marsggbo网易博客http://blog.163.com/hexin_mars_blog/blog/ ...

  10. 多线程图像处理中对选入DC的位图保护

    我在应用多线程加速图像处理(具体参见图像处理的多线程计算)的过程中,曾遇到过一个线程同步的问题.多线程对图像不同子块进行处理,再合成.结果发现最终不是全部子块都处理成功,有的子块好像没有被处理.而且发 ...