ie css居中,css实现div水平、垂直居中兼容chrome、ie8
示例1 chrome33、ie8测试通过:
复制代码代码如下:
/* 固定宽高div,在浏览器中保持水平、垂直居中 */
#div1 {
width:400px; height:300px;
position:absolute;
left:50%; top:50%;
margin-left:-200px; margin-top:-150px;
background:#f90;
}
示例2 chrome33、ie8测试通过:
复制代码代码如下:
/* 固定宽高div在固定宽高div中保持水平、垂直居中 */
#div1 {
width: 400px;height: 200px;
background-color: #f00;
position: relative;
/* 为div赋予单元格属性,使其可以应用align属性 */
display: table-cell;
vertical-align: middle;
}
#div2 {
width: 200px;height: 100px;
background-color: #0f0;
/* 使当前标签在父标签中水平居中,即0 auto 0 auto */
margin: 0 auto;
display: block;
}
示例3 chrome33、ie8测试通过:
复制代码代码如下:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#div1 {
width: 400px;height: 200px;
background-color: #f00;
/* 使当前标签在父标签位置固定 */
position: absolute;
top: 50%;left: 50%;
margin: -100px 0 0 -200px;
}
#div2 {
width: 200px;height: 100px;
background-color: #0f0;
display: block;
/* 使当前标签在父标签中保持水平、垂直居中 */
top: 50%;left: 50%;
margin: 50px 0 0 100px;
}
示例4 chrome33测试通过,ie8测试不通过,参考http://www.w3school.com.cn/tiy/t.asp?f=css3_box-pack:
复制代码代码如下:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 使用box-pack样式实现div中子元素居中 */
#div1 {
width:350px;
height:200px;
border:1px solid black;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
#div2 {
width:100px;
height:50px;
background-color: #ff0;
border:1px solid black;
}
注:对页面中所有元素应用box-sizing:border-box样式是为了将padding、margin值都计入width、height中,即为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制(http://www.w3school.com.cn/cssref/pr_box-sizing.asp)。在上述代码中应用该样式无意义,但是在企业级应用中应用该样式可以减少很多界面缺陷,如标签未对齐。
ie css居中,css实现div水平、垂直居中兼容chrome、ie8相关推荐
- CSS如何让一个div水平垂直居中
大家好,我是新来的程序猿小清,在我们前端开发中,经常会让元素水平垂直居中的,现在我来给大家带来以下几种水平垂直居中的方法,如有不如,请谅解 <body><div class = &q ...
- CSS实现子元素div水平垂直居中
div基本布局 <div class="main"><div class="center"></div>
- 前端面试系列-CSS基础-div水平垂直居中文本居中(单行文字、多行文字)
文章目录 一.div水平垂直居中 1.flex 2.position (元素已知宽高) 3.position transform (元素未知宽高度) 4.position(元素已知宽度)maigin: ...
- 如何让div水平垂直居中
如何让div水平垂直居中 @(css)[妙瞳] 引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE h ...
- div水平垂直居中的七种方法
学习笔记(一) div水平垂直居中的七种方法 文章目录 学习笔记(一) 前言 一.绝对定位法 1.方法一 2.方法二 3.方法三 4.方法四 二.flex布局法 1.方法五 三.将小div转成行内块 ...
- 关于DIV嵌套(二):div嵌套div水平垂直居中
div嵌套div水平垂直居中可以使用position定位来实现,这是最常用的方法. <!DOCTYPE html> <html><head><meta cha ...
- 让div水平垂直居中的六种方法
** 方法一:绝对定位方法:不确定当前div的宽度和高度,采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位(position: relative;) ...
- 如何实现不定宽高的div水平垂直居中
如何实现不定宽高的div水平垂直居中 第一个方法:我们使用定位给父元素positon:relative,定位到中间 div{ position:absolute; top: 50%; left: 50 ...
- css实现div水平垂直居中:竖排居中,横排居中
write-mode实现文字竖排并居中 参考:css实现文字纵向排版并且水平垂直居中 <div class="title-div">实时故障信息</div> ...
- CSS、JS 使DIV水平 和 垂直居中的各种方法
在Web开发中,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div. 在这里,我 ...
最新文章
- Hibernate commit() 和flush() 的区别
- Java多线程之集合类(线程安全和不安全)
- SecureCRT远程连接Ubuntu,SecureCRT开发环境配置
- 前台页面通过ajax环境和js调用web service的几种方法
- 蓝桥杯 ALGO-63 算法训练 乘法表
- 二叉树 先序遍历 中序遍历 后续遍历 java实现
- JAVA 实现《超级玛丽》游戏
- 工程制图与计算机绘图教学视频,工程制图与计算机绘图(西电版)第1章_制图的基本知识教材教学课件.ppt...
- HTB TIER 2 Archetype wp
- Weakly Supervised Instance Segmentation using Class Peak Response论文复现以及遇到的问题
- bzoj3384[Usaco2004 Nov]Apple Catching 接苹果*bzoj1750[Usaco2005 qua]Apple Catching*
- 数据库连接报错代码-08S01
- 求第 N 个 斐波那契数的多种方法
- 呃,是该坚持些事情了
- 面试-技术面试-问题模板(超实用)
- Hello, QML!
- 好分数阅卷3.0_好分数阅卷3.0app
- 【微信小程序】云数据库交互-增删改查
- Web应用的概念以及Java Web应用的发展路程
- oracle 记录镜像文件,记录oracle 10g RMAN的一些新特征-介绍了镜像与备份集的区别...