DIV实现垂直居中对齐的方法

2016-02-19 15:17 2 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享DIV实现垂直居中对齐的方法，希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - Web开发】

　　尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下)。标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。

　　非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。

body {padding: 0; margin: 0;}body,html{height: 100%;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 400px;margin: 0 auto;} /* for explorer only */
div.greenBorder {border: 1px solid green; background-color: ivory;}
div id="outer"
div id="middle"
div id="inner" class="greenBorder"
/div
/div
/div

　　以上CSS代码的优点是没有hacks，采用了IE不支持的CSS2选择器#value[id]。

　　CSS2选择器#value[id]相当于选择器#value，但是Internet Explorer不支持这种类型的选择器。同样地.value[class]，相当于.value,这些只有标准浏览器能读懂。

　　测试：Firefox1.5、Opera9.0、IE6.0、IE5.0通过。

来源:https://www.tulaoshi.com/n/20160219/1609306.html

看过《DIV实现垂直居中对齐的方法》的人还看了以下文章更多>>

CSS实现不定高度DIV绝对居中

标签： Web开发

一般来说，指定高度的DIV垂直和水平居中比较方便，而不定高度的话就稍微麻烦了点，我尝试了一下，通过2个辅助的DIV实现了绝对居中，兼容IE和FF等标准浏览器。 CSS代码： #wrapper{height:100%;width:100%;overflow:hidden;position:relative} #wrapper[id]{display:table;} #mid{position: absolute;top:50%;left:50%} #mid[id]{dis...

CSS实现未知高度图文混合垂直居中

标签： Web开发

CSS* { margin:0; padding:0; list-style:none; } #vertical_box { width:100%; display:table; border:1px red solid; height:400px; /*针对IE的hack*/ *position:relative; } #vertical_box_sub { display: table-cell; vertical-align: middle; /*针对IE的hack*/ *position:absolute; *top:50%; } #vertical_box_container { fo...

CSS垂直居中网页布局实现的5种方法

标签： Web开发

利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。(可以看看测试页面，有简短解释。) 方法一这个...

Word2003快速实现居中对齐

标签：电脑入门

在使用Word2003编辑中文文档的时候，常常需要在段落首行空两格。或者在编辑报纸、杂志时，需要设置成段落首行不缩进从第二行开始缩进。这些排版需求都会使用到Word2003提供的段落缩进功能。段落缩进包括首行缩进、左缩进、右缩进和悬挂缩进四种方式，每种缩进方式的功能如下： 1.左(右)缩进：整个段落中的所有行的左(右)边界向右(左)缩进; 2....

DIV居中的绝好解决方法

标签： Web开发

现在进行WEB重构的时候,一般我们做DIV 居中是这样: body{ margin:0px auto; text-align:center; } 但是在没申明下面这句解析方法的时候,页面就会出错.不能居中对齐! !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" 为此困扰了我几天.那么有的朋友就会说:你加上这句不就行了吗？可...

查看更多精彩>>