当子元素比父元素宽时子元素居中的解决方法

父元素比子元素宽时怎么让子元素居中,稍微了解 CSS 的同学应该都知道怎么做。

hello world

但如果子元素比父元素宽呢?比如常见的当广告图片比浏览器窗口都大的时候,显示图片中间的部分?如果还用上面的例子,同样的代码:

hello world

很显然传统的方式是无法满足这个需求的。但感谢 CSS3 的到来,flex box 就是专门干这个事情的:

hello world

注:可能有些属性需要带上 vendor 前缀比如 —o- 或者 -webkit- 等才能适配浏览器,总之我心爱的 Firefox 是可以不需要前缀支持 flex 的。

只不过…… 挨千刀的 IE (貌似现在叫 Edge)居然依然无法在一个 flex 元素里居中比他大的子元素,不过还好还有另外一种解法:

hello world

此种方式利用 left 的百分比值是相对于父元素,而 translateX 的百分比是相对于自身的特点,有点别扭得实现,这下所有新生代浏览器都支持了。

虽然后面一种方式可以解决问题,但是因为有点别扭,所以相对于 flex 直白的表示,我还是更喜欢 flex。可惜 flex 还是个孩子,各家浏览器支持得还不够完美,希望 flex 被大家完美支持的那一天早点到来吧

wx pay

CC BY-NC-ND 4.0 当子元素比父元素宽时子元素居中的解决方法 by Chrisyue's Blog is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.

发表评论

电子邮件地址不会被公开。