代码:

<div class="father">
<div class="son">
</div>
</div>

方案一:

div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】,

兼容性:,IE7及之前版本不支持

 
    .father{
        width:400px;
        height:400px;
              background: red;
        position:relative;  /* 或者position:absolute;*/
    }
    .son{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}

优点:

  • 简单

缺点:

  • IE(IE8 beta)中无效
  • 无足够空间时,.son 被截断,但是不会有滚动条出现

方案二:

div绝对定位水平垂直居中【margin 负间距】     这或许是当前最流行的使用方法

    .father{
        width:400px;
        height:400px;
              background: red;
        position:relative;  /* 或者position:absolute;*/
    }

.son{

            width:200px;
height: 200px;
background:green;
position: absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}

优点:

  • 适用于所有浏览器
  • 不需要嵌套标签

缺点:

  • 没有足够空间时,.son会消失(类似div 在 body 内,当用户缩小浏览器窗口,滚动条不出现的情况)

方案三:

div绝对定位水平垂直居中【Transforms 变形】

兼容性:IE8不支持;

    .father{
        width:400px;
        height:400px;
              background: red;
        position:relative;  /* 或者position:absolute;*/
    }
        .son{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:50%; /* 定位父级的50% */
top:50%;
transform: translate(-50%,-50%); /*自己的50% */
}

不定宽高的的水平垂直居中

方案四:

css不定宽高水平垂直居中,CSS3属性

     .father{
        width:?px;
        height:?px;
              background: red;
       display:flex;
justify-content:center;
align-items:center;
/* aa只要三句话就可以实现不定宽高水平垂直居中。 */
}
.son{
background: green;
width: ?px;
height: ?px;
}

方案五:

将父盒子设置为table-cell元素,可以使用text-align:center和vertical-align:middle实现水平、垂直居中。比较完美的解决方案是利用三层结构模拟父子结构

     .father{
        width:?px;
        height:?px;
              background: red;

        display: table-cell;
        vertical-align: middle;

        }
        .son{
background: green;
width: ?px;
height: ?px;
       margin: auto;
} 或者
     .father{
        width:?px;
        height:?px;
              background: red;

        display: table-cell;
        vertical-align: middle;

        text-align:center;

        }
        .son{
background: green;
width: ?px;
height: ?px;
       display:inline-block;
}

优点:

.son 可以动态改变高度(不需在 CSS 中定义),.son 不会被截断

缺点:

Internet Explorer(甚至 IE8 beta)中无效,许多嵌套标签

方案六:

对子盒子实现绝对定位,利用calc计算位置

  .box {
    position: relative;
   }

  .div {
    width: 200px;
    height: 200px;
    background: green;
    position: absolute;
    left: -webkit-calc((400px - 200px)/2);
    top: -webkit-calc((400px - 200px)/2);
    left: -moz-calc((400px - 200px)/2);
    top: -moz-calc((400px - 200px)/2);
    left: calc((400px - 200px)/2);
    top: calc((400px - 200px)/2);
  }

div水平垂直居中方法及优缺点的更多相关文章

  1. 【笔记】让DIV水平垂直居中的两种方法

    今天写的了百度前端学院春季班的任务:定位和居中问题  由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...

  2. Div水平垂直居中的三种方法

    百度了很多种方法,很多是不起作用的.下面这些方法是我亲自试过的.希望对大家有帮助! 下面是一波代码水军. <!DOCTYPE html> <html lang="en&qu ...

  3. div 固定宽高 水平垂直居中方法

    div固定宽高,水平垂直居中,根据所用单位不同,分成两种情况,分别是"px"和"%"情况. 例:将三层div做出三个边框,要求水平垂直居中.效果如图 情况一(单 ...

  4. 如何让div水平垂直居中

    引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...

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

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

  6. 【最全】CSS盒子(div)水平垂直居中居然还有这种方式

    最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...

  7. 文字以及div水平垂直居中

    文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...

  8. DIV水平垂直居中的CSS兼容写法

    DIV水平垂直居中,非IE浏览器可以用CSS3来处理,IE浏览器中分别处理IE6和/IE7.IE8.IE9. 在IE低版本中,虽然大致上没有问题,但还是有一些细微的显示问题. 示例如下: <!D ...

  9. scss : div水平垂直居中

    scss 是一个很好用的css预处理语言,有很多很好的特性. 比如 mixin. 我们可以像使用函数那样使用mixin. 比如写一个div水平垂直居中. 上代码. @mixin absolute_ce ...

随机推荐

  1. JFinal架构简介

    JFinal 是基于Java 语言的极速 web 开发框架,其核心设计目标是开发迅速.代码量少.学习简单.功能强大.轻量级.易扩展.Restful.在拥有Java语言所有优势的同时再拥有ruby.py ...

  2. C# 类初始化顺序

    C#的类初始化顺序和Java以及C++类初始化顺序是不同的,曾经我被这个问题害惨了.对于C#和Java,其共同点都是先变量后构造函数,先静态后普通 区别在于,C#是子类变量->父类变量-> ...

  3. PAT 1054 求平均值 (20)(代码+思路+测试用例)

    1054 求平均值 (20)(20 分) 本题的基本要求非常简单:给定N个实数,计算它们的平均值.但复杂的是有些输入数据可能是非法的.一个"合法"的输入是[-1000,1000]区 ...

  4. geoserver笔记

    geoserver中只支持shp 的数据的发布,也就是.shp的数据.其他的如mapgis的数据则需要转成.shp的格式 要发布地图数据为WMS服务,首先得建立工作空间(也可以使用现有的工作空间),然 ...

  5. 04 存储库之mongodb

    MongoDB   一 简介 MongoDB是一款强大.灵活.且易于扩展的通用型数据库1.易用性 MongoDB是一个面向文档(document-oriented)的数据库,而不是关系型数据库.不采用 ...

  6. mupdf编译snprintf冲突问题

    mupdf-1.6-source\thirdparty\jbig2dec\config_win32.h //#  define snprintf _snprintf

  7. Vue.js 生命周期的应用

    生命周期示意图 值得注意的几个钩子函数 activated 类型:Function 详细: keep-alive 组件激活时调用. 该钩子在服务器端渲染期间不被调用. 参考: 构建组件 - keep- ...

  8. Vue.js2 + Laravel5 采用 CORS 方式解决 AJAX 跨域的问题

    一.建立中间件 php artisan make:middleware CorsAjax 二.编写中间件 CorsAjax <?phpnamespace App\Http\Middleware; ...

  9. app怎么测试性能

    性能测试一般来说 都是代码能力相对薄弱的测试人员 进阶的一个方向:但是当你成为一个真正的全栈人才的时候你就不得不学习代码: APP 或者安卓手机 或者iOS  一本测试他的性能的话都是采用:手机安装一 ...

  10. msys2 git status显示中文文件名问题

    git config [--global] core.quotepath off https://stackoverflow.com/questions/5854967/git-msysgit-acc ...