水平/垂直居中详解

转载 2014年05月03日 00:10:58

水平/垂直居中 [出处]

 @Huan艺斌  

使用table

无论水平还是垂直居中,使用 table 实现都超简单,只需 text-algin:center;vertical-align:middle; 就可以了。这便是下面的水平/垂直居中的第一个方法。

小提示:下面方法中的水平居中案例及垂直居中的前四个案例摘自曹刘阳所著《编写高质量代码——Web前端开发修炼之道》的Page104-112     方法三(inline-block + vertical-align:middle 方法)取自QQ空间相册预览的垂直居中效果,提取后的效果预览

水平居中

除上述 table 方法外,其他的CSS实现居中会遇到很多种情况,不同的情况使用的方法不同。

文本、图片等行内元素的水平居中

给父元素设置 text-align:center 可以实现文本、图片等行内元素的水平居中,如下:

hello world!


.tc{text-align:center}

<p class="tc">hello world!</p>
<p class="tc"><img src="img/"></p>

注意:以上方法适用的是内联元素。

确定宽度的块级元素的水平居中

确定宽度的块级元素的水平居中是通过设置 margin-left:auto 和 margin-right:auto 来实现的,如下:

.bc{margin-left:auto;margin-right:auto;}
.ctest{width:300px;height:100px;background:#ccc;}

<div class="ctest bc"></div>

不确定宽度的块级元素的水平居中

不确定宽度的块级元素有三种方式可以实现居中。以分页模块为例,因为分页的数量是不确定的,所以我们不能通过设置宽度来显示它的弹性。

方法一:外嵌套table方法

.bc{margin-left:auto;margin-right:auto;}
.pages1 li{float:left;display:inline;margin-right:5px;}
.pages1 a{float:left;display:block;padding:0 9px; height:25px; line-height:25px;}

<table class="bc">
    <tr><td>
        <ul class="pages pages1">
            <li><a href="#">1</a></li>
        </ul>
    </td></tr>
</table>

这里用到了一个有趣的标签 table 来帮助实现了不确定宽度的块级元素的水平居中,table有趣的地方在于它本身并不是块级元素,如果不给它设定宽度的话,它的宽度由内部元素的宽度“撑起”,但即使不设定它的宽度,仅设置 margin-left:auto 和 margin-right:auto 就可以实现水平居中!将 ul 包含在 table 标签内,对 table 设置 margin-left:auto 和 margin-right:auto 就可以使 table 水平居中,间接使 ul 实现了水平居中。

这种做法很巧妙,但缺点是增加了无语义的标签,加深了标签的嵌套层数。

方法二:变块级为inline类型

.pages2{text-align:center; padding:5px;}
.pages2 li{display:inline;}
.pages2 a{padding:4px 9px; line-height:25px;}

<ul class="pages pages2">
    <li><a href="#">1</a></li>
</ul>

这里换了种思路,改变块级元素的display为 inline 类型,然后使用 text-align:center 来实现居中。相较于方法一,它的好处是不用增加无语义标签,简化了标签的嵌套深度,但它也存在一定的问题:它将块级元素的 display 类型改为 inline,变成了行内元素,而行内元素比起块级元素缺少一些功能,比如设定长宽值,在某些特殊需求的CSS设置中,这种方法可能会带来一些限制。

注:其实这里使用变块级为inline-block类型更为合适,此方法为水平居中 的推荐方案

方法三:使用position:relative

.pages3{float:left;clear:both;padding-top:5px;position:relative;left:50%;}
.pages3 li{float:left;display:inline;margin-right:5px;position:relative;left:-50%;}
.pages3 a{float:left;padding:0 9px; height:25px; line-height:25px;}

<ul class="pages pages3">
    <li><a href="#">1</a></li>
</ul>

方法三通过给父标签设置 float,然后父元素设置 position:relative 和 left:50%;,子元素设置 position:relative 和 left:-50%;来实现水平居中。它可以保留块级元素仍以 display:block 的形式显示,而且不会添加无语义标签,不增加嵌套深度,但它的缺点是设置了position:relative,带来了一定的副作用。

此方法可以解决浮动居中的问题,详情参见float-center.html

这三种方法使用得都非常广泛,各有优缺点,具体选用哪种方式可以视具体情况而定。

垂直居中

父元素高度不确定的文本、图片、块级元素的垂直居中

父元素高度不确定的文本、图片、块级元素的垂直居中是通过给父级容器设置相同上下边距实现的,如下:

hello world!



.mtest{padding:20px 0}

<p class="mtest">hello world!</p>
<p class="mtest"><img src="img/"></p>
<div class="mtest"><p class="ctest"></p></div>

父元素高度确定的单行文本的垂直居中

设置此单行文本 line-height 高度等于父元素高度即可

hello world!

<p style="height:100px;line-height:100px;background:#ccc;">hello world!</p>

父元素高度确定的多行文本、图片、块级元素的垂直居中

父元素高度确定的多行文本、图片、块级元素的垂直居中有两种方法。

方法一:外嵌套table方法

说到垂直居中,CSS中有一个用于垂直居中的属性 vertical-align,但只是当父元素为td或tr时,这是属性才会生效,对于其他块级元素,例如div、p等,默认情况下是不支持 vertical-align 属性的。在Firefox和IE8+下,可以设置块级元素的display类型为 table-cell,激活vertical-align属性,但在IE6和IE7并不支持 display:table-cell,所以这种方法没办法跨浏览器兼容。

但我们可以使用最原始的笨方法来实现兼容——既然不支持块级元素设置为table-cell来模拟表格,那么我们就直接使用表格好了,如下:

hello world!
hello world!
hello world!


table.middle{height:130px;background:#ccc;}

<table class="middle">
    <tr><td>
        hello world!<br>
        hello world!<br>
        hello world!
    </td></tr>
</table>

<table class="middle">
    <tr><td>
        <img src="img/center-middle.png" height="60">
    </td></tr>
</table>

<table class="middle">
    <tr><td>
        <div class="ctest"></div>
    </td></tr>
</table>

因为td标签默认情况下就隐式地设置了vertical-align的值为middle,所以我们不需要在显式地设置一遍。

方法二:display:table-cell + hack

对支持 display:table-cell 的IE8+和Firefox用 display:table-cell 和 vertical-align:middle 来实现居中,对不支持 display:table-cell 的IE6和IE7,使用特定的hack,如下:

hello world!
hello world!
hello world!



/* 垂直居中 */
.box{position:relative;height:120px;display:table-cell;vertical-align:middle;background:#ccc;}
.verticalWrap{*position:absolute;*top:-50%;}
.vertical{*position:relative;*top:-50%;}

<div class="box2">
    <div class="verticalWrap">
        <div class="vertical">
            hello world!<br>
            hello world!<br>
            hello world!
        </div>
    </div>
</div>

<div class="box2">
    <div class="verticalWrap">
        <img class="vertical" src="img/center-middle.png" height="60">
    </div>
</div>

<div class="box2">
    <div class="verticalWrap">
        <div class="ctest vertical"></div>
    </div>
</div>

利用hack技术区别对待标准浏览器和IE6/7,在不支持 display:table-cell 的IE6/7下,通过给父子两层元素分别设置 top:50% 和top:-50% 来实现居中。这种方法的好处是没有增加额外的标签,但它的缺点也很明显,一方面使用了hack,不利于维护,另一方面,它需要设置 position:relative和 position:absolute,带来了副作用。

方法三:inline-block + vertical-align:middle 方法

父元素高度固定、子元素的高度不固定,使用inline-block 元素设置 vertical-align:middle 后会垂直居中对齐,添加 .middle-full 空标签辅助实现,如下:

注意: 使用这种方式,针对图片的自动缩放使用 max-width:100%; 时,middle-full和图片间不能有空格空行等

hello world!
hello world!
hello world!


 

/* 垂直居中 */
.middle-item,.middle-full{display:inline-block;*display:inline;*zoom:1;vertical-align:middle;}
.middle-full{height:100%;width:0;overflow:hidden;font-size:0;}

<div class="box3">
    <div class="middle-full"></div>
    <p class="middle-item">
        hello world!<br>
        hello world!<br>
        hello world!
    </p>
</div>

<div class="box3">
    <div class="middle-full"></div>
    <img class="middle-item" src="img/center-middle.png" height="60">
</div>

<div class="box3">
    <div class="middle-full"></div>
    <div class="ctest middle-item"></div>
</div>

利用inline-block 属性的元素设置 vertical-align:middle 后垂直居中对齐的特性,在父标签内放置辅助标签 .middle-full 等高于父标签(宽度为0),表现元素会垂直居中对齐于此标签,从而实现想要的效果。优点相比于方法二大大减少了标签嵌套层级,且更容易实现水平垂直居中(再添加text-align:center即可),同时避免了方法二设置position属性可能引起的副作用。

CSS实现 图片等比缩放并垂直居中

不借助 空标签 而是使用 line-height 实现垂直居中(line-height 为父级元素高度)

注意: 使用这种方式,不同尺寸的盒子需要设置不同的 line-height,并且网页文件必须使用 HTML5 头部声明。

/* 垂直居中 */
.box4{ height:200px; text-align:center;background:#ccc; line-height: 200px;}
.img-middle{max-height:100%;display:inline-block;*display:inline;*zoom:1;vertical-align:middle;}

<div class="box4">
    <img class="img-middle" src="img/center-middle.png" height="60">
</div>

弹窗的居中 定位实现

.Lx,.Ly{position:absolute;left:50%;top:50%;background:red;}
.Lx{width:100px;height:30px;margin-left:-50px;margin-top:-15px;}
.Ly{width:30px;height:100px;margin-left:-15px;margin-top:-50px;}

问题及注意事项:

css 文本和div垂直居中方法汇总

本文总结了垂直居中的各种方法,包括单行文本垂直居中、多行文本垂直居中以及div垂直居中,列出了多种情况对应的方法。读者可以根据实际需要选择合适的方法。...
  • u014607184
  • u014607184
  • 2016年07月04日 14:10
  • 22442

html5图片垂直居中

html5图片居中:主要的思路是用table或者table-cell,还有一种不太了解,贴在最后。 一:显式使用table标签 这是只需要定义内容的CSS样式为table-...
  • gl5773477
  • gl5773477
  • 2016年10月08日 09:54
  • 3262

盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { ...
  • freshlover
  • freshlover
  • 2013年09月11日 21:06
  • 323966

CSS 元素垂直居中的 6种方法

转自:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E...
  • wolinxuebin
  • wolinxuebin
  • 2012年05月30日 09:56
  • 343788

css实现垂直水平居中的5种方法

css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; ...
  • starsskyg
  • starsskyg
  • 2017年11月17日 22:04
  • 53

元素水平垂直居中的几种方法

1.设置父盒子为弹性布局 Title html,body{ height: 100%; } body{ ...
  • shuidinaozhongyan
  • shuidinaozhongyan
  • 2017年05月19日 21:06
  • 653

css 文本和div垂直居中方法汇总

本文总结了垂直居中的各种方法,包括单行文本垂直居中、多行文本垂直居中以及div垂直居中,列出了多种情况对应的方法。读者可以根据实际需要选择合适的方法。...
  • u014607184
  • u014607184
  • 2016年07月04日 14:10
  • 22442

不固定宽和高的div 水平和垂直都居中

在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示。 如果div有固定宽度的话,用padding,margin都很容易实现。方法有很多种。...
  • u010174173
  • u010174173
  • 2015年07月29日 11:07
  • 3945

用CSS/CSS3 实现 水平居中和垂直居中的完整攻略

水平居中:行内元素解决方案 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可:   .parent { text-align:cente...
  • Summer_lover_
  • Summer_lover_
  • 2017年03月26日 21:05
  • 1932

web前端面试水平垂直居中详解

1.行内元素的水平垂直居中;通过在父元素中设置text-align,让子元素的文本进行居中;然后通过line-height属性让子元素的行高等于父元素的高度。 行内元素水平垂直居中 ...
  • a419419
  • a419419
  • 2017年06月26日 12:31
  • 310
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:水平/垂直居中详解
举报原因:
原因补充:

(最多只允许输入30个字)