Html 如何在调整大小时居中放置div

我看了看已经提出的问题，并尝试了多种解决方案，但似乎没有什么对我有效。我有一个div，里面有多个div，我不能把它放在页面中间的调整大小

上。 这是包含多个其他div的父div

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

对不起，如果我真的很蠢，对这个很陌生。我已经尝试删除了左侧和顶部的内联样式，但没有任何效果

编辑

---

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

1“margin:0 auto”和“width 50%”的css部分应该是子div，而不是父div

第二，你可以让你的生活更容易我移动到flexbox，它会自动完成所有这些

---

请参见

您需要关闭

div

标签。为什么要使用宽度、最大宽度、最小宽度？请尝试以下代码：

.newmodal{
背景：红色；
最大宽度：200px；
保证金：0自动；
高度：50px；
}

.newmodal{
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
宽度：50%；
最大宽度：900px；
/*我们的页面宽度*/
最小宽度：500px；
背景：#222；
}

一些内容

我创建了这个，您可以使用它来查看。尝试使用类似以下内容：

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

$(".newmodal div").on("click", function() {
  if ($(this).css('display') == 'block') {
        $(this).hide();
    }
    else {
        $(this).show();
    }
});

从

HTML

中删除所有样式，因为您提供的

CSS

和

HTML

之间存在一些相互矛盾的样式

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

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

试试这个：

#容器{
位置：相对位置；
浮动：无；
保证金：0自动；
边框：纯蓝1px；
宽度：100%；
}
纽莫代尔先生{
边框：1px纯黑；
显示：块；
保证金：1.5em自动；
文本对齐：居中；
填充：7px；
宽度：50%；
背景：#222；
颜色：#fff；
}

这里有一些内容

尽量不要混合使用

样式

属性和

类

es和后期工作的JSFIDLE。请为我们添加更大的源代码块好吗？

HTML

和

CSS

“调整大小”是指浏览器缩放吗？@Ivan我想这是关于调整大小事件的，但他没有提到使用JS？我不清楚里面有多个div，div标签是关闭的，但是；如果在div'newmodel'中添加一些div，那么这里的代码太多了，但没有任何问题。给我内部代码。但是有多个子div。所以请使用flexbox。我忘了提到此div正在使用按钮隐藏和取消隐藏，因此我不确定这是否会更改当前的任何答案。我忘了提到此div正在使用按钮隐藏和取消隐藏，因此我不确定是否会更改当前的任何答案。是否您使用的是

javascript/jQuery

@阿什利布莱斯是的，我是，隐藏和解开div@AshleyBlyth添加了一些代码，以帮助使用

jQuery

使元素在单击时消失。这不是解决你问题的完美方法，但它可能会引导你走上正确的道路。查看

toggle（）

的文档，还有很多例子。希望我能帮忙，干杯！

$(".newmodal div").on("click", function() {
  if ($(this).css('display') == 'block') {
        $(this).hide();
    }
    else {
        $(this).show();
    }
});