用到CSS3中display的新属性。

HTML

<div class="parent">

</div>

CSS

html,body{
width: 100%;
height: 100%;
}
/*方法二*/
body{
display: flex;
align-items: center;/****水平居中****/
justify-content: center;/*垂直居中*/
}
.parent{
width: 750px;
height: 400px;
background: orange;
/*方法一*/
/*margin: 0 auto;*/
/*position: relative;*/
/*top: 50%;*/
/*margin-top: -200px;*//***此行等于transform:translateY(-50%)******/
}

还有一种关于table的方法不常用。这三种都长用到!

CSS3中DIV水平垂直居中-2(3)的更多相关文章

  1. div中div水平垂直居中

    方法-1 img { vertical-align: middle; } div:before { content: ""; display: inline-block; widt ...

  2. CSS:使用CSS3将一个div水平和垂直居中显示

    使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...

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

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

  4. CSS布局中的水平垂直居中

    CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. 插入排序java代码

    /** * 插入排序 * * 原理:从数组中取出一个值插入到一个左边已经排好序的数组片段中 * * @param a * @return */ public long[] InsertSort(lon ...

  2. JavaScript垃圾回收(三)——内存泄露

    一.JavaScript内存监测工具 在讨论内存泄露之前,先介绍几款JavaScript内存监测工具. IE的sIEve与JSLeaksDetector(这两个可以在下面的附件中下载),firefox ...

  3. tomcat6类加载器与类加载顺序

    tomcat6.0.32 com.dyyx.ShareUtils//返回系统当前时间public static String now(); package com.dyyx;import java.t ...

  4. 使用junit测试用例

    通常只会使用junit测试非main方法,在我眼里就是程序入口实现而已.今天,发现原来可以测试类. 针对mybatis练习.在需要测试的UserDaoImpl类上右键,新建一个junit case,位 ...

  5. matlab 读取excel

    clear;clc; tic;%启动计时器,计算程序运行时间 a=xlsread('C:\Documents and Settings\Administrator\桌面\data.xls');b=a( ...

  6. LeetCode - 50. Pow(x, n)

    50. Pow(x, n) Problem's Link ----------------------------------------------------------------------- ...

  7. 开源通信(C#)__

    GitHub中的README文件,使用markdown格式的文件. 下面简单介绍下相关语法: 大标题: =================================== 大标题一般显示工程名,你 ...

  8. LeetCode - Pascal's Triangle II

    题目: Given an index k, return the kth row of the Pascal's triangle. For example, given k = 3, Return ...

  9. 九个Console命令,让js调试更简单

    一.显示信息的命令 最常用的就是console.log了. 二.占位符 console上述的集中度支持printf的占位符格式,支持的占位符有:字符(%s).整数(%d或%i).浮点数(%f)和对象( ...

  10. 学习“迷你ASP.NET MVC框架”后的小结

    看蒋老师MVC的书第二个大收获可以是算是看了这个迷你ASP.NET MVC框架了,虽然它远不如真正ASP.NET MVC(下文简称“MVC”)那么复杂庞大,但在迷你版中绕来绕去也够呛的.这部分我看了几 ...