Question

我的目的是将标题<div>居中，但我无法做到。

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

请帮帮我。

Answer 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;
}

Answer 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的任何东西都会导致问题。然而，有多种填充和黑客可以让事情发挥作用，而且它们通常比只为一个功能创建额外的类或样式表更整洁。

Answer 3

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

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

CSS Div不居中

3 个答案: