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

方案一（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. sql 语句优化

    sql语句性能达不到你的要求,执行效率让你忍无可忍,一般会时下面几种情况. 网速不给力,不稳定. 服务器内存不够,或者SQL 被分配的内存不够. sql语句设计不合理 没有相应的索引,索引不合理 没有 ...

  2. 服务器数据库搭建流程（CentOs+mysql）

    前言: 服务器上数据库搭建需要知道Linux系统的版本,以前的Ubuntu14.04直接在终端下输入apt-get install (package)便可方便的下载并安装mysql,但是在centOs ...

  3. 【2017-2-17】VS基本应用及C#基础第一节（定义变量、输入及输出）

    一VS基本应用 (一)新建项目 新建项目可有多种方法例如: 1.  在VS起始页面建立新项目 2.  在集成环境中,通过"文件"/"新建"/"项目&q ...

  4. asp.net mvc源码分析-Route的GetRouteData

    我知道Route这里东西应该算路由,这里把它放到mvc里面有些不怎么合适,但是我想大家多数遇到路由都是在mvc的时候吧.首先我们还是来看看GetRouteData方法吧 [csharp] public ...

  5. Struts2学习笔记⑦

    今天我宛若一个智障- Struts2学的差不多了,今天开始做数据库CURD操作的案例,发现模型驱动一直报NullPointerException异常-.我的妈,我查了半天觉得没啥问题,把关注点放在了g ...

  6. Struts2框架(8)---Struts2的输入校验

    Struts2的输入校验 在我们项目实际开发中在数据校验时,分为两种,一种是前端校验,一种是服务器校验: 客户端校验:主要是通过jsp写js脚本,它的优点很明显,就是输入错误的话提醒比较及时,能够减轻 ...

  7. Python（五）编程小实例

    Python(五)编程小实例 抓取网页信息,并生成txt文件内容! Python抓取网页技能--Python抓取网页就是我们常看见的网络爬虫,我们今天所要用到的就是我们Python中自带的模块,用这些 ...

  8. MySQL入门(上)

    1 课程回顾 自定义标签&编码实战 1)自定义标签步骤: 1.1 编写标签处理器类,继承SimpleTagSupport类,覆盖doTag方法 1.2 在WEB-INF目录下建立tld文件,在 ...

  9. 使用Func<>和Action简化委托

    /// <summary> /// 入口 /// </summary> public void Run() { TestDelegate t = test; t(); Acti ...

  10. ASP.NET使用ajax实现分页局部刷新页面

    listview列表实现分页是非常容易的.ListView分页是非常简单的,加上一个DataPager控件,把ListView的ID赋予就可以了.最开始我就是这么写的.(网上有人说这样是伪分页?) & ...