Question

我已经查看了已经提出的问题并尝试了多种解决方案，但似乎没有任何对我有用。我有一个div，里面有多个div，我不能让它在调整大小的页面中间位于中心

这是包含多个其他人的父div

<div id="showme" class="newmodal" style="position: absolute; z-index: 1000; 
    max-width: 561px; left: 700px; top: 263px; display: none;">

这是div的css

.newmodal {
    position: fixed;
    margin: 0 auto;
    max-width: 900px;   /* our page width */
    min-width: 500px;
    width: 50%;
}

对不起，如果我真的很蠢，对此非常陌生。我尝试删除左侧和顶部内联样式，但没有任何工作。

修改

我忘了提到这个div是使用按钮隐藏和取消隐藏的，所以我不确定这是否会改变当前的任何答案。

Answer 1

＆＃13;

.newmodal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  max-width: 900px;
  /* our page width */
  min-width: 500px;
  background: #222;
}

＆＃13;

<div id="showme" class="newmodal">Some content</div>

＆＃13;

它会垂直和水平居中div。

Answer 2

您需要关闭div标记。为什么要使用width,max-width,min-width？请尝试以下代码：

＆＃13;

.newmodal {
  background: red;
  max-width: 200px;
  margin: 0 auto;
  height: 50px;
}

＆＃13;

<div id="showme" class="newmodal"></div>

＆＃13;

Answer 3

我创建了您可以用来查看的CodePen。尝试使用这样的东西：

.newmodal {
  position: relative;
  margin: 0 auto;
  max-width: 900px;
  min-width: 500px;
  background-color: red;
}

从HTML删除所有样式，因为您提供的CSS和HTML之间存在一些相互矛盾的样式。

<div id="showme" class="newmodal">
   <!--Some added data-->
</div>

另请注意，要使margin: 0 auto;合作，该元素必须为block样式，它不能float，它不能{{1} }}或fixed，以及absolute不是width。从以下帖子中找到此信息：What, exactly, is needed for "margin: 0 auto;" to work?

修改

因此，如果您正在使用auto，并且希望使其显示和消失，则可以执行以下操作：

jQuery

唯一的问题是让元素重新出现。但我不确定你的整个项目是什么样的，但我希望这能指出你正确的方向。

Answer 4

试试这个：

＆＃13;

  
#container {
    position: relative;
    float: none;
    margin: 0 auto;
    border: solid blue 1px;
    width: 100%;
}

.newmodal {
  border: 1px solid black;
  display: block;
  margin: 1.5em auto;
  text-align:center;
  padding:7px; 
  width: 50%;
  background:#222;
  color:#fff;
}

＆＃13;

<div id="container">
  <div class="newmodal">Some content here</div>
</div>

＆＃13;

Answer 5

第一个css部分＆＃34;保证金：0 auto＆＃34;和＆＃34;宽度50％＆＃34;应该是儿童div而不是父母。

第二，你可以让你的生活变得更轻松，我可以自动完成所有这一切。

请参阅https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

如何调整div的中心

5 个答案: