【问题标题】: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;
}

请帮帮我。

【问题讨论】:

标签: css margin


【解决方案1】:

margin: 0 auto 只能在staticrelative 位置居中元素。由于您的 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%);
    

    【讨论】:

      猜你喜欢
      • 2017-12-20
      • 1970-01-01
      • 1970-01-01
      • 2015-05-06
      • 2020-06-21
      • 2012-08-26
      • 1970-01-01
      • 2013-07-20
      • 2014-08-31
      相关资源
      最近更新 更多