Centering a smaller div inside a larger div

Question

I've tried to search around for some answers, but still haven't found any.

Basically what I'm trying to do is center my green box within my blue box.

The blue box is 100%, the green is 80%, and I figured I'd just give my green box a margin-left of 10%, but for some reason it doesn't seem to work.

Here's a screenshot of what I'm talking about -- https://imgur.com/xaPttJM

#content_wrapper {
  height: 30rem;
  width: 100%;
  background-color: blue;
  position: relative;
  margin: 0;
}

.content {
  height: 30rem;
  width: 80%;
  background-color: green;
  position: absolute;
  margin-left: 10%;
  display: inline-block;
}

<div id="content_wrapper">
  <div class="content">

  </div>
</div>

I've usually been able to do this before, but I must be missing something somewhere.

Thanks in advance!

Looking perfectly centered to me. – connexo Feb 25 '18 at 17:08 — connexo, Feb 25 '18 at 17:08
.content { margin:0 auto; } – Faiyaz Md Abdul Feb 25 '18 at 17:09 — Faiyaz Md Abdul, Feb 25 '18 at 17:09

Web R · Answer 1 · 2018-02-25T17:32:18.173

1

HTML:

<div id="content_wrapper">    
    <div class="content">Your text</div>
</div>

CSS:

#content_wrapper {
  background-color: green;
  text-align: center;
}
.content {
  background-color: red;
  display: inline-block;
}

edited Feb 25 '18 at 17:32

answered Feb 25 '18 at 17:10

Web R

565
1
6
23

Hey man, thanks for the quick reply! I tried doing what you wrote, but to no avail; my preview still looks like the image I posted in my original question... :( – spøjst Feb 25 '18 at 17:23
I updated my answer with a different technique. Hope it helps you now. – Web R Feb 25 '18 at 17:32
Thank you for taking the time to help me fella, but I already solved it, haha... I had *, body {margin: 0 !important; } at the top of my CSS file, removed it, and now my divs are centered! :) But thanks again! – spøjst Feb 25 '18 at 17:35

score 0 · Answer 2 · 2018-02-25T17:30:47.417

0

#content_wrapper {
  height: 30rem;
  width: 100%;
  background-color: blue;
  position: relative;
  margin: 0;
}

.content {
  height: 30rem;
  width: 80%;
  background-color: green;
  margin:0 auto !important;
  display: block !important;
}

this will center it horizontally heres a js fiddle https://jsfiddle.net/benF/b4w2yboy/6/

remove position:absolute; and set display:block; and remove the margin-left: 10%; then it should work

NOTE you must have a width set for the .content element currently it is 80%

edited Feb 25 '18 at 17:30

answered Feb 25 '18 at 17:08

Hey man, thanks for the quick response! I tried to actually ctrl+c, ctrl+v your fiddle into my css file, but it still looks like the image i posted in my original question... :( – spøjst Feb 25 '18 at 17:24
is there any other css that is affecting those 2 divs? @treadwell – Feb 25 '18 at 17:25
Well, the only thing I could think of would be, that I have a html{ margin: 0;} inside my css file, do you think that would have anything to do with it? – spøjst Feb 25 '18 at 17:27
no i dont think so let me edit my fiddle and question – Feb 25 '18 at 17:28
can you make a fiddle with all your code so i can take a deeper look at it please @treadwell – Feb 25 '18 at 17:29
Wait wait wait! I figured it out! Silly me... the first line of my CSS file was *, body { margin: 0 !important;} -- taking the !important out fixed the thing, and my divs are not centered! – spøjst Feb 25 '18 at 17:31
oh ok did my solution help any? @treadwell – Feb 25 '18 at 17:32
It sure did, it made me go over the CSS file and look for any random css affecting my divs, haha. Thanks for the help fella! – spøjst Feb 25 '18 at 17:34
can you accept my answer please i would really appreciate it @treadwell – Feb 25 '18 at 17:35

Centering a smaller div inside a larger div

2 Answers2