How to center a div inside a div?

Question

my HTML is as below:

  <div id="background_div">
    <img id="background_img" src="images/background.jpg" alt="dont matter">
    <i class="material-icons">perm_identity</i>
    <div id="dropdown">
      <ul id="dropdown2" class="dropdown-content">
        <li><a href="#!">one<span class="badge">1</span></a></li>
        <li><a href="#!">two<span class="new badge">1</span></a></li>
        <li><a href="#!">three</a></li>
      </ul>
      <a class="btn dropdown-button" href="#!" data-activates="dropdown2">Select Service<i class="mdi-navigation-arrow-drop-down right"></i></a>
    </div>
  </div>

I changed the syntax to have the div id "dropdown" inside div id "background_div" (child/parent) because I thought it may help me centre using some sort relative CSS function. I originally had the two divs as siblings... Basically, all i'm trying to achieve is getting the dropdown div smack bang in the middle of the background_div . Be nice to do it in a responsive way too.

Can anyone please provide some CSS script to help me achieve?

Thank you!

You see, there's a good reference here.. https://css-tricks.com/centering-css-complete-guide/ — choz, Sep 21 '16 at 01:51
@cup_of trying to both vertically and horizontally center. I made use of text-align center for parent div, but that just centered horizontal - any ideas for vertical? cheers ! — ngboverflow, Sep 21 '16 at 02:00

score 0 · Answer 1 · answered Sep 21 '16 at 01:49

0

This CSS makes use of Flexbox

#background_div {
  display: flex;
}

#dropdown {
  justify-content: center;
}

answered Sep 21 '16 at 01:49

fvgs

21,412
9
33
48

Careful with this. Flexbox is relatively new and subject to bugs. Research your browser support before utilizing. – Chris Sobolewski Sep 21 '16 at 01:56
It's a fair warning, but Flexbox has been a while at this point. Plus, it does have great support in major browsers. For a basic use case like this, anyway, there should be no issues – fvgs Sep 21 '16 at 02:47

score 0 · Answer 2 · answered Sep 21 '16 at 01:53

You can add text-align: center; to the css style of #background_div, but then EVERYTHING inside of #background_div will be centered. If you only want certain parts to be centered, wrap those parts in a <span> tag, with the class centered, so <span class="centered">. Then in your css, add in

.centered {
  text-align: center;
}

Now you can add a <span class="centered"> around anything that you want to be centered.

cup_of · Answer 3 · 2016-09-21T02:09:00.530

0

my favorite method to vertically center something is to do:

/* the div you want centered inside another div*/

#dropdown {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* set the parent div to position relative */

#background_div {
    position: relative;
}

This will probably mess up your horizontal center if you are using text-align center. In that case add this to your css

width: 100px; /* give it any width that fits */)
margin: 0 auto;

so your final code will look like:

#dropdown {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    margin: 0 auto;
}

#background_div {
    position: relative;
}

edited Sep 21 '16 at 02:09

answered Sep 21 '16 at 02:03

cup_of

6,397
9
47
94

Thanks for the detail!!! – ngboverflow Sep 21 '16 at 04:54
np, did this work for u? – cup_of Sep 21 '16 at 18:37
Hi, sort of (thank you), but something was additionally missing - using materialize framework so had to go through styling in dev tools to find out that line-height and div height were different - after I made the same, all the positioning code outlined above worked! Cheers – ngboverflow Sep 22 '16 at 08:02

How to center a div inside a div?

3 Answers3