Location div in the middle

Question

This is the code: https://jsfiddle.net/twy161er/6/

HTML:

<div id="top">
Logo. Menu
</div>

<div id="content">
Text Text Text
</div>

<div id="bottom">
Text in the bottom
</div>

CSS:

#top {
  width: 100%;
  height: 100px;
  background-color: red;
}
#bottom {
  width: 100%;
  height: 100px;
  background-color: blue;
  margin: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
}

#content {
}

I want the "content" div to be in the center and in the middle of the page.

How should I do it?

Quick and simple: Centering with flexbox - http://stackoverflow.com/a/33049198/3597276 — Michael Benjamin, Dec 19 '15 at 11:44

Alien · Accepted Answer · 2015-12-19T12:47:41.250

2

Create a parent div .main for the three DIV and add a wrap DIV tag for content text and use display table table-row table-cell.

html, body {
  height: 100%;
  margin: 0;
}
.main {
 display: table;
 width: 100%;
 height: 100%;
}
.top {
 height: 0;                /* make it dynamic */
 background-color: red;
 display: table-row;
}
.bottom {
 height: 0;                /* make it dynamic */
 background-color: lime;
 display: table-row;
}
.content {
 display: table-row;
 vertical-align: middle;
 background: yellow;
}
.content div {
    text-align: center;
 vertical-align: middle;
 display: table-cell;
}

<div class="main">
  <div class="top">
    Logo. Menu<br />
    Dynamic content
  </div>
  <div class="content">
    <div>Text Text Text</div>
  </div>
  <div class="bottom">
    Text in the bottom<br />
    Dynamic content
  </div>
</div>

Jsfiddle demo : https://jsfiddle.net/twy161er/15/

Why use display:table? Because the content text always show even if the window height less than 200px; and you get IE8/9 support.

edited Dec 19 '15 at 12:47

answered Dec 19 '15 at 11:45

Alien

3,658
1
16
33

Yes, that is wrong.. It should be centered both horizontally and vertically. – codez Dec 19 '15 at 11:52
@Cattla May I make a few modifications to your code? .. Mainly to remove absolute positioning, which is not needed and should be avoided. – Asons Dec 19 '15 at 12:32
@Cattla Done, now you need to update your fiddle yourself :) – Asons Dec 19 '15 at 12:43
Your're welcome, your were too close for me to add an answer of my own using `display: table` (which is my favorite for older browser support when a flex-like solution is wanted) – Asons Dec 19 '15 at 12:49
@Cattla Thanks! It support IE8/9 too? – Roy Dec 19 '15 at 12:58
@Roy yes, support > IE8 :) – Alien Dec 19 '15 at 13:00

codez · Answer 2 · 2015-12-19T11:51:29.123

1

That is pretty simple!

You can make the contents of the #content like this:

<div id="content">
    <div>Text Text Text</div>
</div>

Then, all you need to do is add this CSS:

#content {}

#content div {
  position: absolute;
  padding: 0;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Explanation

You firstly absolute your text. Then, you reset the margin and padding of the element <div>. What you do then is, push the inner <div> down by 50% of the page height and push left by 50% of the page width. Then, you have to move it towards the left, 50% of its width, and move it towards the top, 50% of it's height. That way, you can get the exact center of the <div>.

Working example: JSFiddle.

edited Dec 19 '15 at 11:51

answered Dec 19 '15 at 11:36

codez

1,440
2
19
34

2

This solution overlaps header when content gets bigger ... https://jsfiddle.net/twy161er/14/ – Asons Dec 19 '15 at 12:20
@LGSon Don't you think the only thing the OP wants is to vertically and horizontally center the line of text..? – codez Dec 19 '15 at 12:44
I think that a solution that overlaps like this is less good no matter what the OP wants. – Asons Dec 19 '15 at 12:46

score 0 · Answer 3 · edited May 23 '17 at 11:44

0

CSS rule "margin: auto" to the #content div should put it on the middle horizontally.

In order to put it in the middle of the screen, try:

#content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

taken from here How to position a div in the middle of the screen when the page is bigger than the screen

Notice that your top and bottom divs are in absolute position, so no way to tell the #content div to position itself relatively to them.

edited May 23 '17 at 11:44

Community

1
1

answered Dec 19 '15 at 11:40

Yaakov

184
1
8

Well what if the page is scrolled... it will move down. – codez Dec 19 '15 at 11:42
Position fixed is not a good solution, and is not the solution he is looking for. – Vixed Dec 19 '15 at 11:44
This is depending of what he try to accomplish. if he want the conent to align center but not fix in the middle of screen, then he can use "absolute" instead of "fixed" – Yaakov Dec 19 '15 at 11:44
yes, this is the answer of @HassanAlthaf, may be better with a **div** instead of **p**. – Vixed Dec 19 '15 at 11:47
@HassanAlthaf will have some problem on scroll, position absolute need a body height of 100% to be crossbrowser, but than you'll have again a problem while scrolling. – Vixed Dec 19 '15 at 11:51

score -3 · Answer 4 · answered Dec 19 '15 at 11:30

-3

Your content is missing reference to id "#".

And i hope this is solution to your problem.

#content {
  display: table;
  margin: 0 auto;
}

answered Dec 19 '15 at 11:30

Strahinja Djurić

394
1
2
14

Thanks, now the content text is in the center, but not in the middle. I want it to be in the middle... I meant that the space between the top to the content divs will be the same as the space between the content to the bottom divs. – Roy Dec 19 '15 at 11:33
its not just matter of missing # – Dilip Oganiya Dec 19 '15 at 11:41

Location div in the middle

4 Answers4