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. Django框架之模板基础，静态文件配置

    一.模板继承 目的是:减少代码的冗余 语法: {% block classinfo %} {% endblock %} 具体步骤: 1.创建一个base.html文件,2.把要显示的页面的内容写在这里 ...

  2. Python函数之初体验

    定义函数 在Python中,定义一个函数要使用def语句,依次写出函数名.括号.括号中的参数和冒号:,然后,在缩进块中编写函数体,函数的返回值用return语句返回. 我们先定义一个求字符串长度的函数 ...

  3. 第五课 Makefile文件的制作(补充)

    序言: 前面的几节课讲解Makefile的一些基本知识也做了一些小例子实践了几下,那么到现在普通的练习则是没有问题.但是如果做项目文件较多又分层次等等还是会碰上好多问题的,这节课补充一些知识. 知识点 ...

  4. GIT学习笔记（5）：变基

    GIT学习笔记(5):变基rebase 变基 引入变基 在Git中整合来自不同分支的修改主要有两种方法:merge以及rebase. 整合分支最容易的方法是merge,他会把两个分支的最新快照以及两者 ...

  5. TP框架基础2

    ---恢复内容开始--- [空操作和空控制器处理] 空操作:就没有指定的操作方法 空控制器:没有指定控制器 http://网址/index.php/Home/User/login http://网址/ ...

  6. Mixed mode assembly is built against version 'v2.0.50727' of the runtime and cannot be loaded in the 4.0 runtime without additional configuration info

    Mixed mode assembly is built against version 'v2.0.50727' of the runtime and cannot be loaded in the ...

  7. Vue-router学习（一）- 路由匹配

    一.Vue-router引入使用 Vue-router就是一个vue路由类,通过new一个Vue路由实例,然后Vue.use()嵌入即可. 一般分为以下步骤: 1.引入 (1).方法一:npm包嵌入, ...

  8. 如何防止通过URL地址栏直接访问页面

    如何防止通过URL地址栏直接访问页面 一.解决方案 1,将所有页面放在WEB-INF目录下 WEB-INF是Java的web应用安全目录,只对服务端开放,对客户端是不可见的.所以我们可以把除首页(in ...

  9. Linux：查看磁盘空间占用情况

    Linux:查看磁盘空间占用情况 工作中有时被分配的测试机空间不大,经常遇到磁盘空间占满的情况.排查过程如下: 一.首先使用df -h 命令查看磁盘剩余空间,通过以下图看出/目录下的磁盘空间已经被占满 ...

  10. Saltstack 命令参数整理

    命令:salt-key # 测试 命令:salt-key -A # 管理所有minion 命令:salt-key -a # 管理定义minion 命令:salt-key -d ID名字 # 删除单个m ...