HTML5技术

CSS常见居中讨论 - 会编程的银猪(2)

字号+ 作者:H5之家 来源:博客园 2015-12-26 16:46 我要评论( )

这种办法的缺点是需要知道高度,无法根据内容长短自适应。所以就有了transform的方法,将margin-top一个具体的负值改成transform: translate(0, -50%),由于translate里面的面百分比是根据元素本身的高度计算的,于

       这种办法的缺点是需要知道高度,无法根据内容长短自适应。所以就有了transform的方法,将margin-top一个具体的负值改成transform: translate(0, -50%),由于translate里面的面百分比是根据元素本身的高度计算的,于是就可以达到自适应的效果。将上面outer样式改为:

.outer{ position: relative; top: 50%; left: 50%;
width: 200px; transform: translate(-50%, -50%); }

      这个办法十分地方便,为了提高兼容性,需要添加-ms-和-webkit-前缀,缺点是IE8不支持。

      上面的两种办法:margin-top一个负值和translate -50%都有一个潜在的弊端, 就是如果设置left为50%是借助position为absolute的话,可能会导致换行:

.container{ position .nav{ position left transform bottom地形气候运动

      效果如下:

 

      可以看到,本来应该在一行显示的p元素却换行了,这是因为在一个relative元素里面absolute定位的子元素会尽可能地不超过容器的边界,通过把行内元素换行的方式。由于设置left为50%,导致p元素超了边界,所以就换行了,即使再translate -50%但已经晚了。即使是交换下两者的位置也是一样的效果,看得出浏览器执行的顺序始终是以absolute的定位优先。所以这种方法还是有不适合的场景,主要是用于左右居中定位为absolute的的情况。

      另外一个CSS3居中的办法是使用flex布局,flex布局居中十分容易和方便,只需要在父容器添加三行代码,例如上面的居中情况,可将.nav的样式改为:

.nav{ position:absolute; bottom: 0; display: flex; align-items: center; justify-content: center; width: 100%; }

      效果如下:

       flex布局在自适应领域的功能真的是非常强大,不过,所以说可能的话,不要太去照顾IE了。

 

      上面讨论的都是一些复合元素的居中,接下来分析单纯的行内元素的垂直居中。

      主要是要借助vertical-align: middle。如下,有一张图片和文字:

photo

      如果不做任何处理,那么默认的垂直居中是以baseline为基准:

photo

      为了让它们能够垂直居中,需要改变它们的居中方式:

.container img, .container span{ vertical-align: middle; }

      注意每个元素都需要设置,效果:

photo

       如果container的高度比图片还要高:

photo

 

      为了让中间的内容能够在container里上下居中,可以设置文字的line-height为container的高度,那么文字就上下居中了,由于照片是和文字是垂直居中的,所以照片在container里也上下居中了,代码:

.container span{ vertical-align: middle; line-height: 150px; }

      效果:

photo

       这也就给了一个启示,如果需要垂直居中一个div里的比div高度小的照片,可以添加一个元素,让它的line-height等于div的高度,如下:

.container{ width height text-align .container img{ vertical-align .container:before{ content vertical-align line-height

      或者是弄一个inline-block的元素,设置height为100%,这种的兼容性更好:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • CSS 垂直居中 - 寸寸君

    CSS 垂直居中 - 寸寸君

    2017-03-16 13:00

  • 常见的几种数据加密与应用场景 - 连程

    常见的几种数据加密与应用场景 - 连程

    2017-03-14 15:00

  • H5项目常见问题汇总及解决方案 - kelly*

    H5项目常见问题汇总及解决方案 - kelly*

    2017-02-16 11:03

  • 不常见但很有用的chrome调试工具使用方法 - 小火柴的蓝色理想

    不常见但很有用的chrome调试工具使用方法 - 小火柴的蓝色理想

    2017-01-24 14:00

网友点评
r