HTML5技术

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

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

.container:before { content : "" ; display : inline-block ; vertical-align : middle ; height : 100% ;} 上下居中效果: 还有另外一种方法借助absolute定位和margin: auto: .container { position : relative

.container:before{ content: ""; display: inline-block; vertical-align: middle; height: 100%; }

     上下居中效果:

 

       还有另外一种方法借助absolute定位和margin: auto:

.container{ position: relative; } .container img{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; }

      这个方法的神奇之处在于最后的margin: auto,这种方法也适用于div,但是需要给div显式指定一个height,不然div的height会达到外层容器的100%。

      如果图片比container大,这种方法就不适用了。因为有一种比较常见的场景是:照片有一边和container一样高,另外一边按照片的比例缩放,照片居中显示,超出的截断,这种应该叫“占满”(occupy)布局。这种情况,只需要把left/right/top/bottom/设成一个很大的负值即可:

.container img{ position: absolute; left: -9999px; top: -9999px; right: -9999px; bottom: -9999px; margin: auto; } .container{ overflow: hidden; }

      效果:

      综合上面的讨论,左右居中常用text-align和margin: 0 auto,上下居中一种办法是借助table-cell,另外一种是设置top: 50%和margin-top/translate(0, -50%)结合的办法,还有就是使用flex布局,对于行内元素设置vertical-align: middle,同时借助一个高度为100%的元素达到垂直居中的效果。最后是position: absolute和margin: auto结合使用的办法。可以说没有一个方法可以100%适用,可以根据不同的情况合理结合使用。

      如果上文有不妥的地方,或者读者有其它的居中方式,还请指出

 

       参考:

1. How to vertically align an image inside div StackOverflow

2. A Complete Guide to Flexbox

 

 

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

网友点评
d