水平和垂直居中问题

2018年5月1日22:34:02 发表评论 151 阅读
摘要

在我们制作页面的时候,往往会遇到水平和垂直居中的问题,由于具体的情况不一样,使用的方法也不尽相同,本文分4种情况,来说明一下。

已知容器大小和内容大小

已知容器和内容大小的情况。其中水平居中很简单,只需要将text-align属性设置为center就好(或者用margin的auto属性),主要问题在垂直方向上。因为已知容器和内容的大小,所以实现垂直居中的方法也会相对多一点。

例:在宽高为300px的div元素中,包含一个宽高都是300px的图片

使用父元素padding属性来实现垂直居中,代码如下:

  1. div{
  2.     width300px;
  3.     padding50px;
  4.     background#cccccc;
  5.     text-aligncenter;
  6. }
  7. img{
  8.     width300px;
  9.     height300px;
  10. }
  11. <div>
  12.     <img src="tu.jpg" alt="tu">
  13. </div>

效果如下:

水平和垂直居中问题

说明:根据盒模型水平和垂直方向上的宽度计算方法,此时,父元素的宽度是50px+300px+50px,为400px。同样高度也是400px。图片距离父元素的举例均为50px,实现了图片的水平和垂直居中。

同样的道理,使用图片的margin属性,也可以实现图片的水平和垂直居中。代码如下:

  1. div{
  2.     width400px;
  3.     height400px;
  4.     background#cccccc;
  5.     text-aligncenter;
  6. }
  7. img{
  8.     margin50px;
  9.     width300px;
  10.     height300px;
  11. }
  12. <div>
  13.     <img src="tu.jpg" alt="tu">
  14. </div>

说明:该样式和上一样式的区别在于,上一样式的父元素所占的空间,宽度和高度都是400px。而此样式图片元素占有的空间,高度和宽度是400px。

未知容器大小,已知内容大小

未知容器大小,知道内容大小的情况。合理的方法是使内容能够在垂直方向上处于父元素高度50%的位置。

代码如下:

  1. div{
  2.     width400px;
  3.     height400px;
  4.     background#cccccc;
  5.     text-aligncenter;
  6. }
  7. img{
  8.     positionrelative;
  9.     top:50%;
  10.     width300px;
  11.     height300px;
  12. }

效果如图:

水平和垂直居中问题

从图中可以看到,图片元素并没有处于垂直高度的50%位置。其原因在于,相对定位中,图片移动的计算方式是按照上边线来计算的,即此时图片的上边线处于父元素垂直高度的50%位置。为了修正这个差异,可以使用负边界的方法将图片元素向上移动自身高度一半的距离

基于以上分析,在样式中加入如下代码:

  1. img{
  2. margin-top: -150px;
  3. }

如此一来,就修正了由于上边线垂直居中所产生的差异。此时,即使更改父元素的高度,图片元素依然可以垂直居中。

已知容器大小,未知内容大小

已知容器的大小,未知内容大小的情况。代码如下:

  1. .content{
  2.     floatleft;
  3.     width600px;
  4.     height600px;
  5.     line-height600px;
  6.     border3px solid #333333;
  7.     background#cccccc;
  8.     text-aligncenter;
  9. }
  10. img{
  11.     vertical-alignmiddle;
  12. }
  13. <div class="content">
  14.     <img src="tu.jpg" alt="tu"/>
  15. </div>

效果如图:

水平和垂直居中问题

说明:该样式使用的原理是,定义line-height的高度等于容器的高度。

容器大小以及内容大小都未知

容器大小,内容大小都未知的情况。代码如下:

  1. .content{
  2.     display: table;
  3.     width200px;
  4.     height200px;
  5.     border1px solid #333333;
  6.     background#cccccc;
  7. }
  8. .innercontent{
  9.     displaytable-cell;
  10.     vertical-alignmiddle;
  11. }
  12. .inside{
  13.     width100px;
  14.     height100px;
  15.     line-height100px;
  16.     text-aligncenter;
  17.     background#999999;
  18.     border1px solid #333333;
  19.     margin: 0 auto;
  20. }
  21. <div class="content">
  22.     <div class="innercontent">
  23.         <div class="inside">居中的内容</div>
  24.     </div>
  25. </div>

效果如图:

水平和垂直居中问题

说明:该样式中,通过定义元素的display属性来实现。使用display属性,定义元素的属性为table,这样元素就有了表格的特性,然后再定义子元素的属性为table-cell,这样子元素就具有了表格中单元格的属性。因为在表格的单元格中,可以用vertical-align属性定义内容的垂直居中。

修饰图片的水平和垂直居中

以上讨论的是当图片作为内容时的居中方法。如果图片作为修饰部分出现,居中问题就很好解决。代码如下:

  1. .content{
  2.     backgroundurl("tu.png"no-repeat center #cccccc;
  3.     width200px;
  4.     height200px;
  5.     border1px solid #333333;
  6. }

说明:因为图片是作为修饰部分出现,所以应该出现在css中。此时图片作为元素的背景,因此只需要定义背景的位置为center,即可实现图片的居中。

效果如图:

水平和垂直居中问题

以上内容都经过本人的测试,或许会有理解错的地方,欢迎批评指正。


 

weinxin
来找我玩~
这是我的微信扫一扫~
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛