How to a center a div on resize - html

Question

I have looked at the already asked questions and tried multiple solutions but nothing seems to be working for me. I have a div, with multiple div's inside of it, and I cannot get it to center in the middle of the page on resize
This is the parent div which contains multiple others
<div id="showme" class="newmodal" style="position: absolute; z-index: 1000;
max-width: 561px; left: 700px; top: 263px; display: none;">
This is the css for the div
.newmodal {
position: fixed;
margin: 0 auto;
max-width: 900px; /* our page width */
min-width: 500px;
width: 50%;
}
Sorry if I am being really stupid, very new to this. I have tried removing the left and top inline styles but nothing is working.
EDIT
I forgot to mention that this div is being hidden and unhidden using a button so I am not sure if that changes any of the current answers.

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>
It will center div vertically and horizontally.

Answer 2

You need to close your div tag. Why use width,max-width,min-width? Try the following code:
.newmodal {
background: red;
max-width: 200px;
margin: 0 auto;
height: 50px;
}
<div id="showme" class="newmodal"></div>

Answer 3

Try this:
#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>

Answer 4

I created this CodePen that you can use to look at. Try using something like this:
.newmodal {
position: relative;
margin: 0 auto;
max-width: 900px;
min-width: 500px;
background-color: red;
}
Remove all of your styling from your HTML because you had some contradicting styles going on between the CSS and HTML you provided.
<div id="showme" class="newmodal">
<!--Some added data-->
</div>
Remember also that in order for margin: 0 auto; to work, the element must be block style, it can't float, it can't be fixed or absolute, and a width that is not auto. Found this information from this post: What, exactly, is needed for "margin: 0 auto;" to work?
Edit:
So if you are using jQuery and you want to make it appear and disappear, you can do something like this:
$(".newmodal div").on("click", function() {
if ($(this).css('display') == 'block') {
$(this).hide();
}
else {
$(this).show();
}
});
The only problem with this is making the element reappear. But I'm not sure what your entire project looks like but I hope this points you in the right direction.

Answer 5

1st the css part of "margin: 0 auto" and "width 50%" should be for the child div and not the parent.
2nd you can make your life much easier my moving to flexbox which does all that automatically.
See https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/