居中百分比宽高的元素

如果知道该元素确切的宽高，居中它比较容易，可以参考此文，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() 代替。

.center {
  position: absolute;
  left: 50%;
  top: 50%;
 
  /*
  不是 =(
  margin-left: -25%;
  margin-top: -25%;
  */
 
  /* 
  而是!
  */
  transform: translate(-50%, -50%);
 
  /*
  甚至不要定义 
  比如：Height 可以缺省!
  */
  width: 40%;
  height: 50%;
}