`
foolraty
  • 浏览: 389998 次
  • 性别: Icon_minigender_1
  • 来自: 南宁
文章分类
社区版块
存档分类
最新评论

CSS制作水平垂直居中对齐(转)

阅读更多
http://bbs.chinaz.com/archiver/Club/thread-5599760-1.html
CSS制作水平垂直居中对齐 - 2010qwer 2012-10-14 15:43


作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼。这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀,要正确的选择也是一件不容易的事情。我会将这几种方法一一介绍给大家,以供大家参考。
实现方法以及各自的优缺点

方法一:
这种方法用来实现单行垂直居中是相当的简单的,你只要保证元素内容是单行,并且其高度是固定不变的,你只要将其“line-height”设置成和“height”值一样就Ok了。不过这种方法局限性太大,只有单行文本的元素才适用,所以在多行元素中是不能使用这种方法的。
Html Markup
<div class="vertical">content</div>
CSS Code:
.vertical {height:50px;line-height: 50px;/*值等于元素高度的值*/}优点:
适合在所有浏览器,没有足够空间时,内容不会被切掉
缺点:
仅适合应用在文本和图片上,并且这种方法,当你文本不是单行时,效果极差,差到让你感到恶心。
这种方法对运用在小元素上是非常有用的,比如说让一个button、图片或者单行文本字段。
方法二:
这种方法将在需要给容器设置绝对定位(position:absolute),并且定位高度(top:50%)和margin-top为高度的一半(margin-top:-height/2)。这就意味着使用这种方法来实现垂直居中的效果,那么元素必须要有一个固定的高度。这样一来,你给元素设置了固定高度,如果你又给他设置了“overflow:auto”,那么当元素内容超过容器后,这样元素的就会出现滚动,而不会自适应内容的高度。
HTML Markup
<div class="vertical">content</div>CSS Code
.vertical {  height: 100px;/*元素的高度*/position: absolute;top: 50%;/*元素的顶部边界离父元素的的位置是父元素高度的一半*/margin-top: -50px;/*设置元素顶边负边距,大小为元素高度的一半*/}优点:
能在各浏览器下工作,结构简单明了,不需增加额外的标签
缺点:
由于固定死元素的高度,致使没有足哆的空间,当内容超过容器的大小时,要么会消息,要么会出现滚动条(如果元素在body内,当用户缩小浏览器窗口时,body的滚动条将不会出现)。
这种方法主要是针对多行元素来进行元素的垂直居中,而并非是此元素的内容垂直居中,这一点先要理解并分开清楚。另外此方法是通过绝对定位来实现的,那么用这种方法实现元素的垂直居中需要注意以下几点:其一元素定位关系到一个相对定位参考,所以要保证元素是相对于哪个为参考坐标;另外需要设置给元素明确定一个高度值并且给元素设置一个负值的margin-top,而且值为元素高度的一半。这里我建议大家给元素定一个宽度值,因为元素进行绝对定位后脱离文档流,其宽度是根据元素内容所占宽度来计算的,为这能让其视觉效果更好,最好给元素定义一个宽度值。
根据这种方法,我们稍作修改就能使元素不单是垂直居中,而且还可以水平居中,如:
HTML Markup
<div id="wrap">test</div>CSS Code
#wrap {width: 200px;/*元素的宽度*/height:200px;/*元素的高度*/position: absolute;left: 50%;/*配合margin-left的负值实现水平居中*/margin-left: -100px;/*值的大小等于元素宽度的一半*/top:50%;/*配合margin-top的负值实现垂直居中*/ margin-top: -100px;/*值的大小等于元素高度的一半*/}这种方法可以实现元素的水平垂直居中,常用于页面在最中间的布局,使用这种方法一定要把握住:水平垂直居中的元素要有明确的大小(换句话说就是要有确切的宽和高度值);给元素进行绝对定位,并设置left,top值为“50%”(此处最好使用绝对定位,如果只是单单水平居中,此处可以换成相对定位);最后设置margin-top和margin-left的负值,而且其值分别为元素高度和宽度的一半。
方法三:
方法三是使用的的div模拟表格效果,也就是说将多个<div>的“display”属性设置为禾“table”和“table- cell”,并设置他们的“vertical-align”的属性值为“middle”。有关于“display:table”更多的介绍可以点击这里或者去阅读Quirksmode的《The display declaration》一文。
HTML Code
<div id="container"><div id="content">content</div></div>CSS Code
#container {height: 300px;display: table;/*让元素以表格形式渲染*/}#content {display:table-cell;/*让元素以表格的单元素格形式渲染*/vertical-align: middle;/*使用元素的垂直对齐*/优点:
这种方法不会像前面的两种方法一样,有高度的限制,此方法可以要据元素内容动态的改变高度,从而也就没有空间的限制,元素的内容不会因为没足够的空间而被切断或者出现难看的滚动条。
缺点:
不足之处呢?这种方法只适合现代浏览器,在IE6-7下无法正常运行;而且较前两者而言,结构也更复杂。
这种方法在现代浏览器下是非常方便。但是在IE6-7中是不被支持的,因为display:table在IE6-7中不被支持,那么为了解决这种方法在IE6-7的兼容,需要额外增加一个div,并使用hack,下面我们一起来看看其解决办法。
HTML Markup
<div class="table"><div class="tableCell"><div class="content">content</div></div></div>CSS Code
.table {height: 300px;/*高度值不能少*/ width: 300px;/*宽度值不能少*/ display: table; position: relative; float:left;}.tableCell { display: table-cell; vertical-align: middle;text-align: center;padding: 10px; *position: absolute; *top: 50%; *left: 50%; }.content { *position:relative;*top: -50%;*left: -50%; } 方法四:
这种方法有点新意,用这种方法你需要在居中元素前面放一个空的<div>(块元素就可以),然后设置这个<div>的高度为50%,margin-bottom为元素高度的一半,而且居中元素需要清除浮动。需要注意的是,使用这种方法,如果你的居中元素是放在body中的话,你需要给html,body设置一个“height:100%”的属性。
HTML Markup
<body><div id="floater"><!--This block have empty content --></div><div id="content">Content section</div></body>CSS Code
html,body {height: 100%;} #floater{float:left;height:50%;/*相对于父元素高度的50%*/ margin-bottom: -120px;/*值大小为居中元素高度的一半(240px/2)*/} #content {clear:both;/*清除浮动*/ height: 240px;position: relative;}优点:
这种方法能兼容所有浏览器,在没有足哆空间下,内容不会被切掉
缺点:
元素高度被固定死,无法达到内容自适应高度,如果居中元素加上overflow属性,要么元素出现滚动条,要么元素被切掉;另外就是一个不算缺点的缺点,那就是加了一个空标签。
方法五:
这种方法和方法三一样使用display:table-cell来实现,不过方法*同之处是这个方法我们需要一个线盒型,用来实现IE下的效果,需要增加一上行内标签比如说“span”(此处最好使用行内标签,千万不要使用块标签,因为使用块标签会没有效果),并把这个线盒型高度设置为100%,其实现原理大家可以去阅读张鑫旭-鑫空间-鑫生活的《大小不固定的图片、多行文字的水平垂直居中》。
HTML Markup
<p class="table"> <span class="tableCell">Centering multiple lines <br>in a block container.</span> <!--[if lte IE 7]><b></b><![endif]--></p>CSS Code
<style type="text/css">.table {border: 1px solid orange;display: table;height: 200px;width: 200px;text-align: center;}.tableCell { display: table-cell;vertical-align: middle;}</style><!--[if lte ie 7]><style type="text/css">.tableCell {display: inline-block;}b {display: inline-block;height: 100%;vertical-align: middle;width: 1px;}</style><![endif]-->优点:
这种方法的优点和方法三是一样的,不会有高度的限制。
缺点:
不好的地方就是这种方法为了让IE运行正常,需要额外增加一些标签,另外就是线盒型的标签种类有限制。不过用起来还是蛮方便的。
方法六:
这种方法是采用的display:inline-block,然后借助另一个元素的高度来实现居中
Html Markup
<div id="parent"><div id="vertically_center"><p>I am vertically centered!</p></div><div id="extra"><!-- ie comment --></div></div>CSS Code
<style type="text/css">html,body{height: 100%;} #parent { height: 500px;/*定义高度,让线盒型div#extra有一个参照物,可以是固定值,也可以是百分比*/  border: 1px solid red; } #vertically_center, #extra { display: inline-block;/*把元素转为行内块显示*/vertical-align: middle;/*垂直居中*/}#extra {height: 100%; /*设置线盒型为父元素的100%高度*/}</style><!--[if lt IE 8]> <style type="text/css">/*IE6-7不支持display:inline-block,所以在ie6-7另外写一个hack,用来支持ie6-7*/ #vertically_center,#extra { display: inline;    zoom: 1;}#extra {width: 1px;}</style><![endif]--> 优点:
可以自适应高度,简单易懂
缺点:
需要给元素的父元素设置一个高度,这个高度可以是一个固定值或者百分值高度,另外需要增加一个额外的标签,当作线盒型,如div#extra,并且需要设置其高度为100%。另外就是ie6-7不支持display:inline-block,需要给他们另外写一个样式。
这是一个很有意思的方法,但你要懂得如何使用display。有关于这种方法的操作,大家可以去看一看Jonathan Potter写的《CSS, Vertical Centering》。
方法七:
这个方法是针对多行内容居中,而且容器高度是可变的,方法很简单,就是给出上下一样的padding值
Html Code
<div class="columns"><div class="item">test</div></div>CSS Code
.item {padding-top:30px;padding-bottom:30px;}                  优点:
在所有浏览器下能正常工作,支持所有元素,简单易懂,结构清晰
缺点:
使用这种方法不能给容器固定高度,如果固定高度将无法达到效果。
方法八:
正如前面所述,如果元素固定高度后要实现垂直居中,用CSS实现很方便,但对于自适应高度的就比较棘手了。那么第七种方法,要给大家介绍的是使用jQuery的方法
Html Markup
<div class="container"><p>Centered In The Middle Of The Page With jQuery</p></div>CSS Code
.container{background-color:#338BC7;width:270px;height:150px;}jQuery Code
        $(document).ready(function(){ $(window).resize(function(){$('.container').css({position:'absolute', left: ($(window).width() - $('.container').outerWidth())/2, top: ($(window).height() - $('.container').outerHeight())/2});}); // 最初运行函数 $(window).resize();}); 优点:
这种方法,结构简单,易懂,不需要固定元素的大小。兼容各浏览器。
缺点:
需要调用jQuery,如果不支持js或者用户禁掉了js,那么将无法正常运行,那就是杯具了。
上面这种方法对实现页面居中布局很方便,下面我根据上面的思路和方法二写了一个实现元素水平垂直居中的小插件
jQuery Plugin
(function($){$.fn.vhAlign =  function(){ return this.each(function(i){//获取元素的内容高度var h = Math.ceil($(this).height()); //outerHeight=padding+border+heightvar oh = Math.ceil($(this).outerHeight()); //取得margin-top值 var mt = Math.ceil(oh / 2);//取得元素宽度 var w = Math.ceil($(this).width());//outerWidth=padding+border+widthvar ow = Math.ceil($(this).outerWidth());//取得margin-leftvar ml = Math.ceil(ow / 2);//实现元素居中效果$(this).css({"margin-top": "-" + mt + "px", "top": "50%", "margin-left": "-" + ml + "px", "left": "50%",  "width":w, "height":h, "position": "absolute"});});};}) (jQuery);Html Markup
<div class="wrap"><p>test jquery</p></div>接下来需要调用刚才写好的jQuery插件
<script type="text/javascript" src="vhAlign.js"></script>最后需要在div.wrap调用这个function
<script type="text/javascript"> $(document).ready(function(){ $(".wrap").vhAlign(); });</script>  这里有一点需要特别注意,如果元素不是相对于body居中,那么需要在其父元素中进行相对定位。
上面我们一起见证了八种不同方法实现元素的垂直居中效果,下面我们在简单的看一下如何实现元素的水平居中(其实上面有一些效果也实现了水平居中,你可以慢慢回想一下)。
方法一:
这种方法主要使用margin: auto配合元素的width来实现水平居中的效果
Html Markup
<div class="horizontal">content</div>CSS Code:
.horizontal{width: 200px;margin: 0 auto;}使用上面方法实现元素水平居中一定要让元素满足两个条件:其一,元素需要有一个固定宽度值;其二元素的margin-left和margin-right都必须设置为auto,这两个条件少了任何一个都无法让元素达到水平居中的效果。此方法使用水平居中,支持所有浏览器运行,因此他也常用来实现Web页面水平居中的布局效果,如果用在布局,需要注意IE下的效果,换句话说,如果你的 Web页面没有明确声明"!DOCTYPE",那么在IE也会以怪异模式解析你的Web页面,此时上面这种办法将无法让你的页面实现水平居中,但你可以使用下面这种方法解决这个bug。
Html Code:
<div class="container">    页面内容。... </div>CSS Code:
body {text-align: center;/*实现IE在怪异模式下页面水平居中*/  }  .container {  text-align: left;/*让文本恢复到左对齐*/ width: 960px;/*设置页面总宽度*/  margin: 0 auto;/*使页面水平居中对齐*/} 方法二:
实现固定宽度的水平居中,我们还可以使用绝对定位配合负的margin来实现,具体代码如下:
Html Markup
<div class="horizontal">content</div>CSS Code:
.horizontal {width: 960px; position: absolute;left: 50%; margin-left: -480px;/*此值等于“-width/2”*/}这种方法有几点需要注意:其一要有一个固定宽度,其二对要居中的元素进行绝对定位,并且“left: 50%”;其三对此元素设置一个负的“margin-left”并且值等于宽度的一半,另外如果元素不是相对于浏览器的话,还需要在其父元素上设置一个相对定位“position: relative”。
方法三:
这种方法主要是针对单行文本居中或者前面介绍的table格式居,主要运用的是text-align:center让元素水平居中
.testH{text-align:center;}
分享到:
评论

相关推荐

    CSS制作水平垂直居中对齐 多种方式各有千秋

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼。这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀,要...

    CSS让图片垂直居中和底端对齐的代码

    本CSS教程提供了两种对齐方式即垂直居中对齐和底端对齐!更多内容请参考本站的CSS视频教程。 CSS使图片垂直居中的代码: &lt;!DOCTYPE ...

    CSS实现同一行的图片和文字垂直居中对齐的方法

    本文实例讲述了CSS实现同一行的图片和文字垂直居中对齐的方法。分享给大家供大家参考。具体分析如下: 有些朋友会发现,如果一行内容中有图片有文字的话,文字往往会自动的底部对齐,影响美观,那如何让它们相对于...

    CSS 将两个button按钮垂直+水平居中

    参考文章:CSS实现垂直居中的5种方法 具体效果如图: 这个方法使用了一个 position:absolute,有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0; 。但是因为它有固定高度,其实并不能和上下都间距为 0,...

    懒人原生纯css实现多行文字均保持垂直居中效果

    在实际网页中,如何实现如何实现父容器高度固定,文字可能一行,两行或更多行的垂直居中对齐呢? 实现的关键是把文字当图片处理。 用一个span标签将所有的文字封装起来,设置文字与图片相同的display属性...

    垂直居中对齐的CSS示例代码

    垂直居中对齐的核心代码如下: 复制代码代码如下: .elment{ position:relative; top:50%; transform:translateY(-50%); } 具体参见如下案例,利用less将居中对齐的代码携程mixins。 html 复制代码代码如下: ”...

    div中多行文字垂直居中

    div中多行文字垂直居中

    div+css有实例,易学易懂

    6.3.2 未知容器的大小而已知内容大小的水平和垂直居中问题 6.3.3 已知容器的大小而未知内容大小的水平和垂直居中问题 6.3.4 容器的大小和内容大小均未知的水平和垂直居中 6.3.5 修饰图片的水平和垂直居中 6.4 字体的...

    CSS 实现未知内容高度的垂直水平居中(改良版)

    垂直居中在IE浏览器下的实现比较难实现,而更难实现的应该是未知内容高度的垂直水平居中!还好网上也有很多高人发布了一些解决的方法!这里我进行了一些改良,兼容FF,IE6,IE7,Opera…如发现问题有劳回复评论! ...

    css两种垂直居中对齐解决方案(小结)

    第一种垂直居中方法 利用vertical-align:middle进行垂直方向上的居中对齐,此方法需要满足的条件: 设置父元素的行高line-height等于父元素height的高度 子元素必须是行内块级元素display:inline-block; 子元素...

    将一个绝对定位的div水平垂直居中对齐

    在通常情况下,可以为元素添加margin:0px auto即可让元素在它的父元素水平居中,然后再将它设置为垂直居中对齐即可。但是为绝对定位的对象添加margin:0px auto并不能生效,所以说还是要用老办法实现。 代码示例如下:...

    23种CSS垂直居中技巧

    网页CSS的垂直居中需求始终没有停过,而其困难度也始终没有让人轻松过,经过了每位开发先烈的研究后,据说CSS的垂直居中技巧已达到近十种之多,但始终鲜为人知,部分公司甚至将CSS的垂直居中技巧当成面试题,其重要...

    CSS实现垂直居中的七个方法实例代码详解

    ,就可以轻松解决掉水平居中的问题,但一直以来最麻烦对齐问题,都是“垂直居中”这个讨人厌的设定,以下将介绍七种单纯利用CSS垂直居中的方式。 七种垂直居中的方法 设定行高(line-height) 添加伪元素 calc...

    CSS设置多行文本垂直居中的方法

    多行文本垂直居中的CSS需要这么设置: 复制代码代码如下: /*多行居中对齐的方法,width,height必须使用px单位,再配合vertial-align:middle和display:table-cell属性,且div不能浮动*/ .vcenter { width: 100px; ...

    css常用元素水平垂直居中方案

    flex实现水平垂直居中 适用场景:父子宽高都可未知(比较推荐这种方式,简单,而且目前兼容性也不错。) &lt;html&gt; &lt;head&gt; &lt;style&gt; .parent { width: 100%; height: 100px; background: cyan; ...

    CSS图片响应式 垂直水平居中

    4.图片始终保持水平垂直居中。 5.图片的行列数不变,这里一直都是3*3. 下面来搞定一个个要求。 满足要求1意味着这里要尽量不使用高级浏览器才有的属性,比如高级浏览器居中常用的什么 display:table-cell;vertical-...

Global site tag (gtag.js) - Google Analytics