CSS Div 不居中答案

【问题标题】：CSS Div not centeringCSS Div 不居中
【发布时间】：2015-01-27 01:30:14
【问题描述】：

我的意图是将标题 <div> 居中，但我做不到。

header {
   height: 54px;
   margin:0px auto;
   width: 1150px;
   background: #13171B;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 990;
   margin-bottom:10px;
}

请帮帮我。

【问题讨论】：

请查看：stackoverflow.com/questions/14062991/…

标签： css margin

【解决方案1】：

margin: 0 auto 只能在static 或relative 位置居中元素。由于您的 div 位于 fixed 位置，您可以尝试使用

header {
   position: fixed;
   height: 54px;
   width: 1150px;
   ...
   left: 50%;
   margin-left: -575px; /* 1150px/2 */ 
   top: 0;
}

如果您事先不知道width，更好的解决方案涉及css3 转换，例如

header {
   position: fixed;
   height: 54px;
   ...
   left: 50%;
   transform: translateX(-50%);
   top: 0;
}

【讨论】：

【解决方案2】：

因此，我的居中解决方案是；

.parent {
 position: relative;
}
.toCenter {
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%,-50%);
 -moz-transform: translate(-50%,-50%);
 -o-transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);
}

这会将 .toCenter 元素垂直和水平定位到它的 .parent 中心。

如果您只需要水平定位，则元素样式中的每个 'translate(-50%-50%)' 都将变为 'translateX(-50%)'。同样，如果需要垂直对齐，您可以使用 'translateY(-50%)' 代替。

这里重要的是浏览器支持是有限制的。基本上除了 IE 之外的所有东西都可以正常工作，从 IE9 向后的任何东西都会导致问题。然而，有一些 polyfills 和 hacks 可以让事情正常工作，而且它们通常比只为一个功能创建额外的类或样式表更整洁。

【讨论】：

嗯，我认为您缺少左侧：50% 和顶部：50%，使用您在上面发布的内容，只会将该元素带到左侧和顶部的 -50%
好地方，谢谢！我在 head 中有第二个解决方案，它有 0。

【解决方案3】：

这是因为fixed 位置。添加/更改以下属性：

left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);

【讨论】：