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.可以按照需要设置 ...
随机推荐
- vsftpd.conf案例
1. 匿名服务器的连接(独立的服务器) 在/etc/vsftpd/vsftpd.conf配置文件中添加如下几项:Anonymous_enable=yes (允许匿名登陆)Dirmessage_enab ...
- [TypeScript] Overload a Function with TypeScript’s Overload Signatures
Some functions may have different return types depending on the types of the arguments with which th ...
- Django打造大型企业官网(七)
4.13.新闻列表tab栏布局完成 templates/news/index.html <div class="list-outer-group"> <ul cl ...
- [办公应用]word 2007:全屏快捷键,让复制图片保持原样大小(office 全屏快捷键)
最近同事咨询这两个问题: 1.word 2007内是否有全屏显示的快捷键,这样投影时,就可以快速切换到全屏. 2.从ppt或者excel复制一张较大的图片,word 2007 会默认让复制的图片缩小, ...
- Ajax 之 DWR
DWR是开源框架,类似于hibernate.借助于DWR,开发人员无需具备专业的JavaScript知识就可以轻松实现Ajax,是Ajax更平民化. 添加jar包 dwr.jar common ...
- spring 之 IOC 依赖注入详解
当我们对一个javaBean进行实例化时,在原本的情况下我们会选择新建一个接口,然后进行实例化,为了进一步降低耦合度我们还会使用工厂模式进行封装. 例: 当我们想要去造,Chinese.America ...
- go14--并发concurrency,Goroutine ,channel
package main /** 并发concurrency 很多人都是冲着 Go 大肆宣扬的高并发而忍不住跃跃欲试,但其实从 源码的解析来看,goroutine 只是由官方实现的超级“线程池”而已. ...
- [RK3288][Android6.0] 音频调试方法小结【转】
本文转载自:http://blog.csdn.net/kris_fei/article/details/70053135 Platform: ROCKCHIPOS: Android 6.0Kernel ...
- luogu 1966 火柴排队
题目大意: 两列数,可以交换每列中相邻的两个数,算作一次交换 求最小的交换次数使两列数相对应的数之差的平方之和最小 思路: 首先可以明确当两列数的排序位置相对应时,为最佳答案 然后我们按照一中排序后在 ...
- BZOJ_2424_[HAOI2010]订货_最小费用最大流
BZOJ_2424_[HAOI2010]订货_最小费用最大流 Description 某公司估计市场在第i个月对某产品的需求量为Ui,已知在第i月该产品的订货单价为di,上个月月底未销完的单位产品要付 ...