How to a center a div on resize

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.

try to don't mix `style` attributes and `class`es and post working jsfiddle for us please — Franky238, Aug 06 '17 at 18:39
Could you add bigger chunks of source code? both `HTML` and `CSS`. — demogorgon, Aug 06 '17 at 18:40

score 3 · Accepted Answer · edited Aug 07 '17 at 08:04

3

.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.

edited Aug 07 '17 at 08:04

Vadim Ovchinnikov

13,327
5
62
90

answered Aug 06 '17 at 18:48

Sefa Şahinoğlu

494
4
9

score 0 · Answer 2 · edited Aug 06 '17 at 18:49

0

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>

edited Aug 06 '17 at 18:49

Ivan

34,531
8
55
100

answered Aug 06 '17 at 18:44

Archin Modi

492
1
8
19

There are multiple divs inside, the div tag is closed but it;s too much code to put here – Ashley Blyth Aug 06 '17 at 18:54
but don't have any problem, if you add some divs inside div 'newmodel'. give me inside code. – Archin Modi Aug 06 '17 at 18:59

demogorgon · Answer 3 · 2017-08-06T19:31:39.003

0

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.

edited Aug 06 '17 at 19:31

answered Aug 06 '17 at 18:58

demogorgon

474
4
20

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. – Ashley Blyth Aug 06 '17 at 19:11
Are you using `javascript/jQuery`? @AshleyBlyth – demogorgon Aug 06 '17 at 19:14
Yes I am, to hide and unhide the div – Ashley Blyth Aug 06 '17 at 19:15
@AshleyBlyth Added some code to help make an element disappear on click using `jQuery`. It's not a perfect solution to your problem but it may steer you the right way. Check documentation on `toggle()` as well, lots of examples out there. Hope I helped, cheers! – demogorgon Aug 06 '17 at 19:32

score 0 · Answer 4 · answered Aug 06 '17 at 19:09

0

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>

answered Aug 06 '17 at 19:09

Rafiqul Islam

931
11
14

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. – Ashley Blyth Aug 06 '17 at 19:11

score -1 · Answer 5 · answered Aug 06 '17 at 18:43

-1

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/

answered Aug 06 '17 at 18:43

bresleveloper

5,940
3
33
47

but there are multiple child divs. – Ashley Blyth Aug 06 '17 at 19:08
So use flexbox. – bresleveloper Aug 06 '17 at 23:44

How to a center a div on resize

5 Answers5