DIV水平 垂直居中CSS
/*实现一、原理:要让div等块级元素水平和垂直居中,必需知道该div等块级元素的宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,
这个50%就是指页面窗口的宽度和高度的50%,最后将该div等块级元素分别左移和上移,左移和上移的大小就是该div等块级元素宽度和高度的一半。该方法使用普遍,
但是前提是必需设置div等块级元素的宽度和高度。如果当页面div等块级元素宽度和高度是动态的,比方说需要弹出一个div等块级元素元素层并且要居中显示,
div等块级元素的内容是动态的,所以宽度和高度也是动态的,这时需要用jQuery可以解决居中。*/
.mycss{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px
} /*实现二原理:利用CSS的margin设置为auto让浏览器自己帮我们水平和垂直居中*/
.mycss{
position: absolute;
left: 0px;
right:;
top:;
bottom:;
margin: auto;
height: 200px;
width: 300px;
}
DIV水平 垂直居中CSS的更多相关文章
- DIV水平垂直居中的CSS兼容写法
DIV水平垂直居中,非IE浏览器可以用CSS3来处理,IE浏览器中分别处理IE6和/IE7.IE8.IE9. 在IE低版本中,虽然大致上没有问题,但还是有一些细微的显示问题. 示例如下: <!D ...
- 【最全】CSS盒子(div)水平垂直居中居然还有这种方式
最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...
- 如何让div水平垂直居中
引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...
- 文字以及div水平垂直居中
文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...
- 【笔记】让DIV水平垂直居中的两种方法
今天写的了百度前端学院春季班的任务:定位和居中问题 由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...
- scss : div水平垂直居中
scss 是一个很好用的css预处理语言,有很多很好的特性. 比如 mixin. 我们可以像使用函数那样使用mixin. 比如写一个div水平垂直居中. 上代码. @mixin absolute_ce ...
- Div水平垂直居中的三种方法
百度了很多种方法,很多是不起作用的.下面这些方法是我亲自试过的.希望对大家有帮助! 下面是一波代码水军. <!DOCTYPE html> <html lang="en&qu ...
- css实现div水平垂直居中
中秋快到了,祝大家中秋快乐. 平时大家写bug过程中肯定会遇到让div框水平或者垂直居中,然而有时候能居中,有时候不能居中.我把平时遇到的一些方法写出来,如果对你有用,那便是晴天. 1.text-al ...
- 【html】【10】div布局[div水平垂直居中]
必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为: .style{margin:0 auto;} 数字0 表示上下边距是0.可以按照需要设置 ...
随机推荐
- day2-搭建hdfs分布式集群
1.搭建hdfs分布式集群 4.1 hdfs集群组成结构: 4.2 安装hdfs集群的具体步骤: 一.首先需要准备N台linux服务器 学习阶段,用虚拟机即可! 先准备4台虚拟机:1个namenode ...
- 2011 ACM-ICPC 成都赛区A题 Alice and Bob (博弈动规)
题目大意: 有K堆石子,每堆有Ki个.两人的操作能够是: 1 从某一堆拿走一个 假设该堆在此之后没有石子了.就消失 2 合并两个堆 求是否 ...
- WPF中的常用布局 栈的实现 一个关于素数的神奇性质 C# defualt关键字默认值用法 接口通俗理解 C# Json序列化和反序列化 ASP.NET CORE系列【五】webapi整理以及RESTful风格化
WPF中的常用布局 一 写在开头1.1 写在开头微软是一家伟大的公司.评价一门技术的好坏得看具体的需求,没有哪门技术是面面俱到地好,应该抛弃对微软和微软的技术的偏见. 1.2 本文内容本文主要内容 ...
- 后台进程管理工具---supervisor
supervisor是一个linux下的进程管理工具,有时须要开发一些后台服务类的程序.这类程序通常不能由于意外挂掉.所以最好能在出现意外挂掉的情况下可以重新启动,继续服务. 之前我一直採用创建dae ...
- Maven手工安装jar包到本地仓库
使用maven,少不了的就是要被"包下载失败"这种问题折腾. jar包下载失败后.我们选择手工把jar下载下来.(能够下载到指定jar的途经非常多) 以下随便找了一个jar包为例. ...
- jquery.validate自己定义验证--成功提示与择要提示
1. 自己定义验证--成功提示 1) 加入选项 errorClass: "unchecked". validClass: "checked", errorEle ...
- 在Linux上安装zsh
简单介绍: 相对于绝大多数linux发行版默认的shell--bash,zsh绝对是一个优秀的替代品.zsh是交互型shell,同一时候它也是一个强大的编程语言,很多bash,ksh,tcsh优秀的地 ...
- Flask开启多线程、多进程
一.参数 app.run()中可以接受两个参数,分别是threaded和processes,用于开启线程支持和进程支持. 二.参数说明 1.threaded : 多线程支持,默认为False,即不开启 ...
- bzoj4269
http://www.lydsy.com/JudgeOnline/problem.php?id=4269 裸线性基,一个数取多次就是没取... 又有了些新的理解:a数组的前now个元素是基底,也就是可 ...
- EasyUI 取得选中行数据
转自:http://www.jeasyui.net/tutorial/23.html 本实例演示如何取得选中行数据. 数据网格(datagrid)组件包含两种方法来检索选中行数据: getSelect ...