0

I'm looking for a method to center a div in the body, a div without defined dimentions?

Any help would great. Example

Martijn
  • 15,791
  • 4
  • 36
  • 68
sai
  • 85
  • 2
  • 9
  • 3
    Please provide a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). Please look at guide [how do I ask a good question?](https://stackoverflow.com/help/how-to-ask) – Andrzej Ziółek Jun 27 '18 at 16:32
  • I';ve improved your answer, but the previous comment still remains :) – Martijn Jun 27 '18 at 16:35

3 Answers3

4

By combining margin and translate:

First, create 50% of the page height space above the div with margin-top: 50%;. The div now starts at the middle of the page.

But thats too far and you dont know the height, how to correct that? By using translate. Margin refers to the parent (in this case the body), translate refers to the size of the object (#example)

#example{
    margin-top: 50%;
    transform: translateY(-50%);
    /* And now you figure out how to use the same trick on the X-axis */
}

Some demo values to help it make more obvious:

document height     Element height  ->  50% margin in px    -50% translate in px    
 800px                  250px       ->      400px               -125px
 800px                  150px       ->      400px               - 75px
1000px                  150px       ->      500px               - 75px

Nice bonus of this method: It keeps working when when you add any value padding and also when you decide to set some fixed values later on.

Martijn
  • 15,791
  • 4
  • 36
  • 68
  • This approach might have [unexpected side effects](https://codepen.io/ajzk/pen/JZmmBp). Margin might be calculated from `` boundaries, which will make centered div off-center. – Andrzej Ziółek Jun 27 '18 at 16:52
  • Can you give me some example I got confuse myself? Please, will you provide some perfect examples? Thanks – sai Jun 27 '18 at 18:22
  • Nope :) this site doesnt provide 'just answers', it requires some actions from the person who asks the question :) I've given enough info to google :) Also, two duplicate topics have been given – Martijn Jun 27 '18 at 19:48
2

There are few approaches to that problem.

Solution 1

position: absolute, transform: translate.

.parent {
  position: relative;
  height: 500px;
  width: 500px;
  background: green;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: red;
}
<div class="parent">
  <div class="child">
    Content
  </div>
</div>

Solution 2

display: flex; align-items: center; justify-content: center; for parent.

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 500px;
  width: 500px;
  background: green;
}

.child {
  background: red;
}
<div class="parent">
  <div class="child">
    Content
  </div>
</div>
Community
  • 1
  • 1
Andrzej Ziółek
  • 2,241
  • 1
  • 13
  • 21
0

Look into using Flexbox.

Flexbox allows for vertical alignment of elements, no matter what their size, using the align-items property on a parent element. justify-content allows for easy horizontal centering.

A good guide to all things flexbox is here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

See my example here: http://jsfiddle.net/srn4opqL/ or:

HTML:

<div class="flex-container">
  <div class="greenbox">Some arbitrary content<br> that will set the dimensions of the div</div>
</div>

CSS:

.flex-container{
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.greenbox {
  background: limegreen;
  text-align: center;
 padding: 2em;
}

Regarding vendor prefixes. I used the tool at: https://autoprefixer.github.io/ set to "last 3 versions."

WillD
  • 5,170
  • 6
  • 27
  • 56