center a div inside another div vertically

Question

Lets say I have this simple html page:

<div class="main">
    <div class="header">
        <h1>HEADER</h1>
    </div>
    <div class="content">
        <div class="box">
        </div>
    </div>
</div>

My header is fixed and the content should be beneath it and with height 100% of what ever left of the body.
I've already done that with this style:

*{
    margin-left: 0;
    margin-top: 0;
}

body,
html {
    height: 100%;
    width: 100%;
    margin: 0;
}

.header {
    background-color: red;
    text-align: center;
    position: fixed;
    width: 100%;
}

.content {
    background-color: antiquewhite;
    padding-top: 38px;
}

h1 {
    margin-bottom: 0;
}

.main {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.content {
    flex: 1;
}

.box {
    width: 150px;
    height: 150px;
    background-color: yellow;
}

Here's how the page looks for now: https://elbargho.github.io/sudoku/centerdiv.html
now I'm trying to center the box div horizontally and vertically in relative to the full body - the header size
what I've tried to do:

margin-top: 50% - for some reason the box went all the way down to the bottom
setting the position of content div to relative, and of box div to absolute - the content div overlapped the fixed header

Try this `.box { width: 150px; height: 150px; background-color: yellow; margin: auto; position: relative; top: 50%; }` — Avinash Dalvi, Jul 30 '20 at 08:10
@sergeykuznetsov That worked perfectly. But what if I had a text or a div in .container that I dont want to center, what can I do in this situation? — Abdallah Barghouti, Jul 30 '20 at 08:17
@Abdallah Barghouti, They also appear in the center, like the yellow square. Can you show your future site layout? And you can already make the right decision for you. — s.kuznetsov, Jul 30 '20 at 08:20
Just show how your layout should look like and we'll help you arrange the elements correctly. Here all the answers are similar, with the use of `flex`. — s.kuznetsov, Jul 30 '20 at 08:23
Here's what I wanted: https://ibb.co/r5pgyWX the arrows in the photo should be equal in height — Abdallah Barghouti, Jul 30 '20 at 08:29
here's what I've got https://elbargho.github.io/sudoku/centerdiv.html — Abdallah Barghouti, Jul 30 '20 at 08:29
you put the yellow square in a separate class `center`, and you did it right) Your site looks good! — s.kuznetsov, Jul 30 '20 at 08:40

score 1 · Answer 1 · answered Jul 30 '20 at 08:12

You can set content class as

.content {
    /* flex: 1; */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

*{
    margin-left: 0;
    margin-top: 0;
}

body,
html {
    height: 100%;
    width: 100%;
    margin: 0;
}

.header {
    background-color: red;
    text-align: center;
    position: fixed;
    width: 100%;
}

.content {
    background-color: antiquewhite;
    padding-top: 38px;
}

h1 {
    margin-bottom: 0;
}

.main {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.content {
    /*flex: 1; */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.box {
    width: 150px;
    height: 150px;
    background-color: yellow;
}

<div class="main">
    <div class="header">
        <h1>HEADER</h1>
    </div>
    <div class="content">
        <div class="box">
        </div>
    </div>
</div>

score 1 · Answer 2 · answered Jul 30 '20 at 08:16

This is probably what you need. Documented in the code.

* {
  margin-left: 0;
  margin-top: 0;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

/* Modified */
.header {
  background-color: red;
  text-align: center;
  /* position: fixed; */
  position: sticky;
  width: 100%;
}

.content {
  background-color: antiquewhite;
  padding-top: 38px;
}

h1 {
  margin-bottom: 0;
}

/* Modified */
.main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  align-items: center;
}

/* Modified */
.content {
  /*flex: 1;*/
  display: flex;
  align-items: center;
  height: inherit;
}

.box {
  width: 150px;
  height: 150px;
  background-color: yellow;
}

<div class="main">
  <div class="header">
    <h1>HEADER</h1>
  </div>
  <div class="content">
    <div class="box">
    </div>
  </div>
</div>

score 0 · Accepted Answer · answered Jul 30 '20 at 08:12

0

Here solution:

.content {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
}

answered Jul 30 '20 at 08:12

s.kuznetsov

14,870
3
10
25

score 0 · Answer 4 · answered Jul 30 '20 at 08:37

0

One way is to use CSS Transform.

.box {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  /* horizontal center */
  margin: 0 auto; 
}

Check out this website for all CSS centering help: http://howtocenterincss.com/

answered Jul 30 '20 at 08:37

Sudesh Ryan

13
1
3

center a div inside another div vertically

4 Answers4