0

我正在尝试实现 div 的居中垂直和水平对齐。这是我正在使用的样式：

.box{
  position:fixed;
  display:block;
  width:200px;
  height:400px;
  top:50%;
  left: 50%;
  width: 50%;
  transform: translateX(-50%) translateY(-50%);
  background:#ccc;
}

这种风格在 Firefox 中完美运行，但在 Chrome 中却不行。这是示例：http ://codepen.io/0leg/full/HJjrK

有趣的是，我从本教程http://tympanus.net/Development/ModalWindowEffects/的模态窗口中提升了这种样式，并且由于某种原因，这在 webkit 浏览器中完美运行......

4

2 回答 2

0

如您所知，div 的高度和宽度，我会将您的 CSS 更改为：

.box{
    position:absolute;
    width:50%;
    height:400px;
    top:50%;
    left: 50%;
    margin-top: -200px; /* Half the height of the div */
    margin-left: -25%; /* Half the width of the div */
    background:#ccc;
}

您正在将 div 向下移动一半并穿过页面，然后将其负边距向后移动一半宽度。

http://jsfiddle.net/davidpauljunior/utPhs/2/

注意：你有两个宽度声明，我假设你想要第二个（50%），所以删除了第一个。我将固定位置更改为绝对位置，但两者都适用，并且我删除了 display:block ，因为<div>它已经是块级元素。

于 2013-10-30T22:54:00.080 回答
0

这仅仅是因为即使在最新版本的 Chrome 中，您也需要使用供应商前缀-webkit-进行 CSS3 转换。自 v16（当前 v25）以来，Mozilla Firefox 一直支持无前缀转换，具有讽刺意味的是，当前版本的 IE 也是如此。有关浏览器支持的更多信息，请访问：http: //caniuse.com/transforms2d

因此，使用供应商前缀（就-webkit-足够了，除非您想支持旧版本的 IE 和 Firefox，然后也使用它们各自的供应商前缀）：

.test {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: red;
    width: 200px;
    height: 200px;
}

http://codepen.io/terrymun/pen/zCgkI

于 2013-10-30T23:09:59.927 回答