CSS3中DIV水平垂直居中-2(3)
用到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)的更多相关文章
- div中div水平垂直居中
方法-1 img { vertical-align: middle; } div:before { content: ""; display: inline-block; widt ...
- CSS:使用CSS3将一个div水平和垂直居中显示
使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...
- DIV水平垂直居中的CSS兼容写法
DIV水平垂直居中,非IE浏览器可以用CSS3来处理,IE浏览器中分别处理IE6和/IE7.IE8.IE9. 在IE低版本中,虽然大致上没有问题,但还是有一些细微的显示问题. 示例如下: <!D ...
- CSS布局中的水平垂直居中
CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...
- 如何让div水平垂直居中
引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...
- 【笔记】让DIV水平垂直居中的两种方法
今天写的了百度前端学院春季班的任务:定位和居中问题 由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...
- 【最全】CSS盒子(div)水平垂直居中居然还有这种方式
最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...
- 文字以及div水平垂直居中
文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...
- Div水平垂直居中的三种方法
百度了很多种方法,很多是不起作用的.下面这些方法是我亲自试过的.希望对大家有帮助! 下面是一波代码水军. <!DOCTYPE html> <html lang="en&qu ...
随机推荐
- hdu4750Count The Pairs(最小生成树找瓶颈边)
/* 题意:就是给你一个图,图的每两个点都有多条路径,每一条路径中都有一条最大边, 所有最大边的最小边(也就是瓶颈边)就是这两点之间的val值!然后给你一个值f, 问有多少个顶点对的val>=f ...
- 【目录】微软Infer.NET机器学习组件文章目录
本博客所有文章分类的总目录链接:http://www.cnblogs.com/asxinyu/p/4288836.html 1.微软Infer.NET机器学习组件目录 1. Infer.NET连载(一 ...
- 如何用Python寻找重复文件并删除
在实际生活中,经常会有文件重复的困扰,即同一个文件可能既在A目录中,又在B目录中,更可恶的是,即便是同一个文件,文件名可能还不一样.在文件较少的情况下,该类情况还比较容易处理,最不济就是one by ...
- Deep learning:四十四(Pylearn2中的Quick-start例子)
前言: 听说Pylearn2是个蛮适合搞深度学习的库,它建立在Theano之上,支持GPU(估计得以后工作才玩这个,现在木有这个硬件条件)运算,由DL大牛Bengio小组弄出来的,再加上Pylearn ...
- 美妙的 CSS3 动画!一组梦幻般的按钮效果
今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...
- JDK和tomcat环境变量配置
JDK环境变量配置: 如果你的JDK安装在C盘里,如:C:\Program Files\Java\jdk1.6.0_05, 那么就在系统变量里(当然也可以在用户变量里)点新建: 变量名:JAVA_ ...
- Windows Azure Virtual Network (5) 设置Azure Virtual Machine固定Private IP
<Windows Azure Platform 系列文章目录> 注意:本文介绍的是Global Azure (http://www.windowsazure.com),如果你使用的是由世纪 ...
- JS魔法堂:再识instanceof
一.Breif 大家都知道instanceof一般就是用来检查A对象是否为B类或子类的实例.那问题是JS中没有类的概念更没有类继承的概念(虽然有构造函数),那么instanceof到底是怎样判断 ...
- HashSet 与TreeSet和LinkedHashSet的区别
Set接口 Set不允许包含相同的元素,如果试图把两个相同元素加入同一个集合中,add方法返回false. Set判断两个对象相同不是使用==运算符,而是根据equals方法.也就 ...
- 【SQL】分配函数一枚[AllotToTable]
适用环境:MSSQL 2005+.其中05需修改部分语句的写法才行,如: --变量的声明和赋值需分开写 --需改为如下 --05不支持+=这样的复合运算符 --需改为如下 功能: 将一个数字(整数或有 ...