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

方案一（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. SqlService 索引原理

    索引的概念 索引的用途:我们对数据查询及处理速度已成为衡量应用系统成败的标准,而采用索引来加快数据处理速度通常是最普遍采用的优化方法. 索引是什么:数据库中的索引类似于一本书的目录,在一本书中使用目录 ...

  2. Ichars制作数据统计图

    数据统计图基本上每个网站的后台都要做,不仅要做还要的非常详细才行,这样才能全面的具体的了解网站数据.之前用的jfreechart没有iChartjs用着方便,也没有iChartjs的效果炫,所以果断弃 ...

  3. vbs文件小技巧

    vbs文件介绍: VBS是基于Visual Basic的脚本语言.VBS的全称是:Microsoft Visual Basic Script Editon.(微软公司可视化BASIC脚本版). 可以新 ...

  4. 转换器2：ThinkPhp模板转Django模板

    前天写了个<ThinkPhp模板转Flask模板> 居然被同事鄙视了,原因是他用Django,我用Flask,为了避免被他继续安利Django的强大.我决定写一个Django模板转换器. ...

  5. 1707: [Usaco2007 Nov]tanning分配防晒霜

    1707: [Usaco2007 Nov]tanning分配防晒霜 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 548  Solved: 262[Sub ...

  6. 循环单词 java

    链接:https://www.nowcoder.com/questionTerminal/9d5fbe7750a34d0b91c73943f93b2d7d来源:牛客网如果一个单词通过循环右移获得的单词 ...

  7. /bin/sh^M: bad interpreter:解决办法

    xcode编译时有时候遇到/bin/sh^M: bad interpreter:没有那个文件或目录这样的错误 可以用以下方式解决 先在控制台cd到报错的目录 vi xxx.sh(报错的那个文件):se ...

  8. java学习笔记 --- 抽象类

    一.抽象类 (1)定义: 把多个共性的东西提取到一个类中,这是继承的做法. 但是呢,这多个共性的东西,在有些时候,方法声明一样,但是方法体. 也就是说,方法声明一样,但是每个具体的对象在具体实现的时候 ...

  9. css gray，grayscale，css变灰兼容大部分浏览器

    css gray,grayscale,css变灰兼容大部分浏览器 html { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'ht ...

  10. dev机上数据库中批量生成table

    我的低效方法: 通过本地php脚本进行create: <?php //0-63 header("Content-type:text/html;charset=utf-8"); ...