简单方便的div垂直居中。
此处讨论的是,在一个父容器中只有一个DIV,这个DIV相对于父元素垂直居中的问题:
以下列举三种方式:这里为了层次清晰,都是采用的sass写法。
一:适用于子元素有具体的宽高
.wrap{
//父元素可以不定义任何属性
.content{
position:absolute;
height:100px;
top:50%;
margin-top:-50px;//自身高度的一半}}
二:适用于子元素和父元素都没有具体的宽高
.wrap{
display:table;//父元素必须要有的样式属性
.content-wrap{
display:table-cell;
vertical-align:middle;
//子元素必须有的样式,其实是借用table布局。
.content{
//不需要定义任何样式,就会再content-wrap里面居中
}}}
三:适用于子元素有固定的高宽
.wrap{
position:relative;
.content{
position:absolute;:
width:200px;
height:200px;
top:0;
bottom:0;
margin:auto;}
}
简单方便的div垂直居中。的更多相关文章
- 让div垂直居中的5种方法
方法一: 这个方法把 div 的显示方式设置为表格,然后我们可以使用表格的 vertical-align property 属性. HTML & CSS: <div class=&quo ...
- div垂直居中的几种方法
CSS教程:div垂直居中的N种方法[转](原文地址:http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html) 在说到这个问题的时候 ...
- div垂直居中 css div盒子上下垂直居中
div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...
- css的div垂直居中的方法,百分比div垂直居中
前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些d ...
- css中固定宽高div与不固定宽高div垂直居中的处理办法
固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...
- CSS——div垂直居中及div内文字垂直居中
最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...
- 纯css使div垂直居中,div垂直,div居中的方法
首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...
- div垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- 如何让一个div里面的div垂直居中?
如何让一个div里面的div垂直居中? 如何让上面灰色有文字那个div和背景图标垂直居中,不管屏幕大小有好大,始终在垂直方向上的中间.上面有整个布局和样式表,谢谢高手指点 CSS3时代当然要用CSS3 ...
随机推荐
- Modbus RTU程序开发解读
Modbus是很好的串口通信协议,其中RTU协议最为常用,通过Modbus RTU,我们可以轻松读写串口信息. 从官网下载libModbus,观察modbus.h可知关键的结构体为: typedef ...
- TensorFlow 在android上的Demo(1)
转载时请注明出处: 修雨轩陈 系统环境说明: ------------------------------------ 操作系统 : ubunt 14.03 _ x86_64 操作系统 内存: 8GB ...
- linux shell技巧
一.在SHELL编程中,经常要处理一些字符串变量.比如,计算长度啊.截取子串啊.字符替换啊等等,常常要用到awk.expr.sed.tr等命令.下面给大家介绍个简单的字符串处理方法,用不着嵌套复杂的子 ...
- 话说Spring Security权限管理(源码)
最近项目需要用到Spring Security的权限控制,故花了点时间简单的去看了一下其权限控制相关的源码(版本为4.2). AccessDecisionManager spring security ...
- java的前台与后台
技术上:前台是指web展示,webservice接口等输入输出接口,后台是指支持这些接口的程序. 例如读写数据库,读写文件,业务逻辑处理. 业务上来讲:前台是提供给最终用户使用的界面,后台是指管理使用 ...
- 制作简单的2D物理引擎(一)——动力学基础
一切的基础 点 在二维平面中,点$P$就是坐标$(x,y)$,点集就是一系列坐标的集合$\{P_1,P_2,...,P_n\}$,不过这个集合是有序的(顺时针). 向量 加减运算 $$\vec{P}\ ...
- 每个部门绩效成绩第二名 sql server 查询 ( 替代 not in )
原题: 集团中有多个部门,部门底下有多个员工,求每个部门绩效分数排名第二的人员,数据表结构如下: DEPAR NAME SCORE A ...
- 异步编程模型(APM)模式
什么是APM .net 1.0时期就提出的一种异步模式,并且基于IAsyncResult接口实现BeginXXX和EndXXX类似的方法. .net中有很多类实现了该模式(比如HttpWebReque ...
- java中this 关键字的使用
在方法中定义使用的this关键字,它的值是当前对象的引用.也就是说你只能用它来调用属于当前对象的方法或者使用this处理方法中成员变量和局部变量重名的情况.而且,更为重要的是this和super都无法 ...
- window下关闭nginx
nginx -s stop taskkill /F /IM nginx.exe > nul