5、利用弹性布局 与 margin：

<style>

    .container{

        height: 600px;

        width: 600px;

        border:1px solid black;

        display: flex;

    }

    .box{

        width: 200px;

        height: 100px;

        background-color: blue;

        margin: auto;

    }

</style>

<div class="container">

    <div class="box"></div>

</div>

1,子div先充满父元素,在margin:auto,

2,先相对于父元素margin平移,再回拉法,

3,利用表单单元格td特有属性,vertical-align,使子div垂直居中,

　　再对子div设置水平居中.

4、弹性布局，通过定义伸缩容器的两个属性，justify-content主轴方向，align-items纵轴方向均为center

——————（补充）

个人比较喜欢第一种和第四种方法,既简单,又不用计算

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .d-1{

            width: 300px;

            height: 300px;

            position: relative;

            margin: 0 auto;

            border: 1px solid black;

        }

        .d-2{

            width: 200px;

            height: 200px;

            border: 1px solid red;

            position: absolute;

            left:0;top: 0;right: 0;bottom: 0;

            margin: auto;

        }

        .d-3{

            width: 100px;

            height: 100px;

            border: 1px solid blue;

            position: absolute;

            left:50%;top: 50%;

            margin-top: -50px;

            margin-left: -50px;

        }

        .d-4{

            width: 100px;

            height: 100px;

            border: 1px solid blue;

            /*让标签元素以表格单元格形式呈现，类似于td标签，主要是利用它的特殊属性：

            元素垂直居中对齐，但其会被float、position:absolute、

            所以尽量不要与其同用，设置了display：table-cell的元素对宽度高度敏感，

            对margin值无反应，所以页面上出现在了左边，我就不想再在外面加调了哈，

            但会响应padding属性，基本和td标签无异*/

            display: table-cell;

            vertical-align:middle;

        }

        .d-5{

            width: 50px;

            height: 50px;

            background: blue;

            margin:0 auto;

        }

    </style>

</head>

<body>

    <div class="d-1">

        <div class="d-2">

            <div class="d-3">

            </div>

        </div>

    </div>

    <div class="d-4">

        <div class="d-5"></div>

    </div>

</body>

</html>

运行结果:

4、弹性布局，通过定义伸缩容器的两个属性，justify-content主轴方向，align-items纵轴方向均为center

<style>

    .container{

        height: 600px;

        width: 600px;

        border:1px solid black;

        display: flex;

        justify-content: center;

        align-items: center;

    }

    .box{

        width: 200px;

        height: 100px;

        background-color: blue;

    }

</style>

<div class="container">

    <div class="box"></div>

</div>

运行结果：

div垂直水平居中的四种方法总结的更多相关文章

  1. CSS3实现DIV垂直居中+水平居中的四种方法

    <div class="div1"> <div class="div2"></div> </div> html结 ...

  2. css实现垂直水平居中的5种方法

    css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; borde ...

  3. 实现三个div，固定左右两边的div宽为200，中间的div宽度自适应的四种方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 让一个图片在div中居中（四种方法）

    第一种方法: <div class="title"> <div class="flag"></div> <div cl ...

  5. 让一个小div在另一个大div里面 垂直居中的四种方法

    方法一 .parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width: ...

  6. div 清除浮动的四种方法

    概述:为了解决父级元素因为子级内部高度为0的问题 (很多情况 不方便给父级元素高,因为不知道有多少内容,让里面的盒子自动撑起高度),清除浮动本质叫闭合浮动更好一些,清除浮动就是把浮动的盒子关到里面,让 ...

  7. div盒子水平居垂直中的几种方法

      div盒子水平居垂直中的几种方法<!DOCTYPE html><html>    <head>        <mete charset="ut ...

  8. css+div制作圆角矩形的四种方法

    圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师,学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的所 ...

  9. react添加样式的四种方法

    React给添加元素增加样式 第一种方法: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

随机推荐

  1. POJ - 3662 Telephone Lines (Dijkstra+二分)

    题意:一张带权无向图中,有K条边可以免费修建.现在要修建一条从点1到点N的路,费用是除掉免费的K条边外,权值最大的那条边的值,求最小花费. 分析:假设存在一个临界值X,小于X的边全部免费,那么此时由大 ...

  2. CodeForces - 86D Powerful array (莫队)

    题意:查询的是区间内每个数出现次数的平方×该数值的和. 分析:虽然是道莫队裸体,但是姿势不对就会超时.答案可能爆int,所以要开long long 存答案.一开始的维护操作,我先在res里减掉了a[p ...

  3. linux:查看磁盘硬件信息hdparm,smartctl

    smartctl 命令 这个一个用于控制和监控支持smart技术的硬盘的命令.通常配合 -a 选项我们可以查看到比较详尽的硬盘信息(比如序列号.硬盘容量.已运行时间.硬盘健康状况等).用法如下: sm ...

  4. @RequestBody和@ResponseBody的使用情形以及RestTemplate的http报文转换

    @RequestBody和@ResponseBody两个注解,分别完成请求报文到对象和对象到响应报文的转换. @RequestBody 1.@requestBody注解常用来处理content-typ ...

  5. cache工作原理

    转:http://www.360doc.com/content/11/0307/21/3791508_99049437.shtml

  6. Nginx进阶-不停服更新

    前言 7*24小时不间断的提供对外服务和产品快速迭代是互联网行业的特征,基于需求所有的发布都不能停止当前对外的服务.本文围绕此话题衍生出,不停服上下线工具实现. 看本文前请先看 Nginx初识 Ten ...

  7. 《大型网站系统与JAVA中间件实践》读书笔记-数据访问层

    数据访问层 5.1.2数据库垂直/水平拆分的困难 随着网站业务的快速发展,数据量和访问量不断上升,数据库的压力越来越大. 更换更好的硬件(Scale Up)是一种解决方案,而且在我们能付得起硬件费用并 ...

  8. nodejs 设计模式

    1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直接返回,若不存在,则创建实例对象,并将实例对象保存在静态变量中,当下次请求时,则可以直接返回这 ...

  9. Spring -- aop（面向切面编程）,前置&后置&环绕&抛异常通知，引入通知，自动代理

    1.概要 aop:面向方面编程.不改变源代码,还为类增加新的功能.(代理) 切面:实现的交叉功能. 通知:切面的实际实现(通知要做什么,怎么做). 连接点:应用程序执行过程期间,可以插入切面的地点. ...

  10. ACM-ICPC北京站总结

    失踪人口回归.... 第一次ACM比赛还是比较紧张的,总体来说发挥还是有一点失常. day1热身赛 一共四道去年和前年的北京站的题目....似乎都是银牌题及以下难度.半个小时我们就完成了嘴巴AK,然而 ...