居中百分比宽高的元素

发表于   |   分类于 ， ，   |  

原文：Centering Percentage Width/Height Elements
译者：涂鸦码龙

如果知道该元素确切的宽高，居中它比较容易，可以参考此文 ，top 和 left 设成 50%，负 margin 分别设置该元素宽，高的一半。如果明确知道该元素的宽高，用此法居中很容易，如果它的宽高是百分比呢？

你可能认为负的百分比 margin 可以搞定，它适用于水平的 margin，但是 margin 基于宽度（垂直 margin 也是）（译者注：margin 是百分比的话，跟此元素的包含块的宽度有关，见规范），因此当你用负的 top margin 时，失败了。

有个小技巧 ，用一个“ghost”伪元素（看不见的伪元素）和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是这个方法要求待居中的元素是 inline-block，不是一个真正通用的方案。可能你想居中一个模态窗口，受小屏幕 / 响应式设计所限，你很可能会把对话框设计成百分比宽度（或者其它未知情况，比如仅有 max-width 最大宽度。）

有一种方案！Mary Lou 在 Codrops 用到的，她的文章 / 示例：漂亮的模态窗口效果 。

不能用负的 margin ，可以用负的 translate() 代替。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.center {
  position: absolute;
  left: 50%;
  top: 50%;
  /*
  不是 =(
  margin-left: -25%;
  margin-top: -25%;
  */
  /* 
  而是!
  */
  transform: translate(-50%, -50%);
  /*
  甚至不要定义 
  比如：Height 可以缺省!
  */
  width: 40%;
  height: 50%;
}

加上所有需要的前缀。

最终效果实例：

Check out this Pen!