Question

我有一个关于使div中心对齐的非常快速的问题：

我有一个容器

#container {    
    width: 100%;
    margin: 0 auto; 
    max-width: 1300px !important;   
    background: #ccc;       
}

和里面的标题

#header{
    font-family: "Helvetica Neue";
    font-size: 13px;    
    height: 125px;
    width: 100%;
    max-width: 1300px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.9);
    z-index: 1000;
}

和标题内的一个类

#header .inside{
    max-width: 80em;    
    margin: 0 auto; 
    position: relative;
    height: 90px;
    display: block;
}

标题在响应模式下表现良好，但inside在其他分辨率中不会保持居中对齐。我应该在文件中添加什么css以使其在所有分辨率中居中对齐？

由于

Answer 1

将fixed位置的元素与margin:auto;居中并不一致，因为它不再在流程中。

您可以使用固定容器，全宽和内部流量，就像在<body>中使用width和margin:auto;

的容器一样使用

http://codepen.io/anon/pen/cvids

<div id="container">
  <header id="header">
    <div class="maxwidthmarginauto">
    <div class="inside">
      inside header
    </div>
    </div>
  </header>
</div>

body {
  margin:0;
}
#container {    
  width: 100%;
  margin: 0 auto; 
  max-width: 1300px;   
  background: #ccc;
  /* demo purpose */
  min-height:1500px;
  background:linear-gradient(to bottom, gray,lightgray);
}
header{
  font-family: "Helvetica Neue";
  font-size: 13px;    
  height: 125px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;    
  z-index: 1;
}
div.maxwidthmarginauto {
  max-width: 1300px;   margin: 0 auto;
  background: rgba(255, 255, 255, 0.9);

}
header .inside{
  max-width: 80em;    
  margin: 0 auto; 
  position: relative;
  height: 90px;
  background:rgba(0,50,100,0.7);

}

/* see them all */
body * {box-shadow:inset 0 0 0 2px red;border-radius:15px;}
body *:before {
  content:attr(class)'  'attr(id);
  position:absolute;
  background:yellow;
  z-index:2;
  margin:2.5em;
}

Answer 2

我遇到了使用“max-width”集中容器的问题。

我找到的唯一解决方案是使用“width”属性。

关于使div中心对齐的基本css

2 个答案: