用到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. vs xamarin android StartActivity

    跳转无需intent,直接给要跳转的activity的type就可以了 StartActivity(typeof(Login));

  2. CSS选择器的一些记录

    选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstna ...

  3. web中的触摸(touch)与手势(gesture)事件

    一.触摸事件(TouchEvent): 事件: touchstart:当手指触摸屏幕时触发:即使已经有一个手指放在了屏幕上也会触发 touchmove:当手指在屏幕上滑动时连续的触发.调用preven ...

  4. 讲讲Handler+Looper+MessageQueue 关系

    Handler+Looper+MessageQueue这三者的关系其实就是Android的消息机制.这块内容相比开发人员都不陌生,在面试中,或者日常开发中都会碰到,今天就来讲这三者的关系. 概述: H ...

  5. asp.net中打印指定控件内容

    1.写一个PrintHelper类using System;using System.Data;using System.Configuration;using System.Web;using Sy ...

  6. shell脚本二

    在shell脚本一 中,我讨论了shell脚本的语法规范,shell脚本的变量,以及shell脚本的测试语句. 仅仅懂得这些只能写简单的脚本,在简单的脚本中各条语句按顺序执行,从而实现自动化的管理,顺 ...

  7. MVC5中,加载分部视图,常见的方式

    首先,新建一个MVC类型的Web项目: 然后在Model文件夹下定义一个Student实体: public class Student { public int ID { get; set; } pu ...

  8. 【原创】kafka controller源代码分析(一)

    Kafka集群中的一个broker会被作为controller负责管理分区和副本的状态以及执行类似于重分配分区之类的管理任务.如果当前的controller失败了,会从剩下的broker中选出新的co ...

  9. BUG集锦

    1.0 jQuery 序列化表单数据 serialize() 得到的是 ""; 表单元素没有name属性.(用的美工的页面,没注意这个细节.)

  10. WinForm(VB.NET)获取当前登录的用户名

    运行Windows Task Manager,查看Users标签,可以看到所有登录电脑的用户,现在Insus.NET想命名用VB.NET的WinForm程序去获取当前的用户名. 获取程序简单,可以参考 ...