CSS Div 不居中

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

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

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