如何调整中心大小

Question

我已经看过已经问过的问题，并尝试了多种解决方案，但似乎没有任何工作适合我。我有一个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

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

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

这将集中div垂直和水平。

Answer 2

首先，“margin：0 auto”和“width 50％”的css部分应该用于子div而不是父级。

第二，您可以让您的生活更轻松地转移到自动执行所有功能的Flexbox。

见https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Answer 3

您需要关闭div标签。为什么使用width,max-width,min-width？试试下面的代码：

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

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

Answer 4

我创建了这个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，它不能是fixed或absolute和width不是auto。发现这个职位这一信息：What, exactly, is needed for "margin: 0 auto;" to work?

编辑：

所以，如果你使用的是jQuery，你想让它出现和消失，你可以做这样的事情：

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

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

Answer 5

试试这个：

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

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