Set the position of a
block in the middle of the page with adjusting its height automatically

Question

I want to make a <div> block which width is 100% and set its position in the middle of the page (horizontal & vertical center), but without setting an exact height number (because I don't know the exact number of <div> height).

Here's my code:

#content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  width: 100%;
  background: rgba(255, 0, 0, 0.5);
}

<html>
  <head>

  </head>

  <body>
    <div id="content">Hello world!</div>
  </body>

</html>

The result will be like:

(It set its height to an explicit 100% automatically.)

But what I want is like:

I know I need to specify an exact number of height to achieve this effect. But now I don't know the exact height of the content, because the height of the content should be variable.

So how can I make the height adjust itself automatically?

is this what you are going for? https://plnkr.co/edit/a0lruDZV1OpvsAtjaOEQ?p=info — Spluf, Sep 01 '16 at 07:15

score 3 · Answer 1 · answered Sep 01 '16 at 07:12

3

You can use transform: translateY(-50%); with top: 50% without specifying any height to achieve this.

body {
  margin: 0;
}

#content {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
  background: rgba(255, 0, 0, 0.5);
  transform: translateY(-50%);
}

<div id="content">Hello world!</div>

answered Sep 01 '16 at 07:12

Mohammad Usman

34,173
19
88
85

This solution is not cross-browser compatible. See my answer here: http://stackoverflow.com/a/32584696/1274398 it's the same idea as yours. – Bart Burg Sep 01 '16 at 08:24
@BartBurg Check [this](http://caniuse.com/#feat=transforms2d) All latest browser support `transform` and old browser also support it with vendor prefixes. Support for it will increase in future as well. Those days are gone when we were using table and table-cell layout for aligning. – Mohammad Usman Sep 01 '16 at 08:47
You're right I guess, we did have some problems with it lately, but maybe it was with earlier IE browsers. – Bart Burg Sep 01 '16 at 09:14

score 3 · Accepted Answer · answered Sep 01 '16 at 07:17

Flex-box that's it

Here is the working Demo

PS: Try to avoid position: absolute if you can done that with other properties.

#content {
  text-align: center;
  width: 100%;
  background: rgba(255, 0, 0, 0.5);
}
body{
 display: flex;
 align-items: center;
 min-height: 100vh;
}

<div id="content">Hello world!</div>

suvarna Chavan · Answer 3 · 2016-09-01T08:21:58.023

1

<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>

<style>
#content {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  width: 100%;
  height:5%;
  background: rgba(255, 0, 0, 0.5);
}</style>
</head>
 <body>
    <div id="content" style="background-color:rgba(255, 0, 0, 0.5)">Hello world!</div>
  </body>

edited Sep 01 '16 at 08:21

answered Sep 01 '16 at 07:19

suvarna Chavan

87
4

score -1 · Answer 4 · answered Sep 01 '16 at 07:14

#content {
position: absolute;
top: 50%; /* set to 50% of for middle */
left: 0;
right: 0;
/* remove the bottom property */
margin: auto;
text-align: center;
width: 100%;
background: rgba(255, 0, 0, 0.5);
transform: translateY(-50%); /* add transform property to move it up 50% of the div's actual height */
}

#content {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    width: 100%;
    background: rgba(255, 0, 0, 0.5);
    transform: trranslateY(-50%);
   text-align: left;
}

<div id="content">
  
  <p>Hello world! Pretty simple</p>
  <p>Just set the transform property to subtract 50% of the div's height while positioning it vertical center.</p>
  <p>Position will automatically adjust based on the current height of the div</p>

</div>

score -1 · Answer 5 · answered Sep 01 '16 at 07:16

You can use simply css property =

#content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
text-align: center;
width: 100%;
background: rgba(255, 0, 0, 0.5);

/******Just Add one line in css its help you******************/

height: auto;

}

score -1 · Answer 6 · answered Sep 01 '16 at 07:17

-1

Use this css style:

body{
margin:auto;
}
#content {
position: absolute;
text-align: center;
width: 100%;
background: rgba(255, 0, 0, 0.5);
top: calc(50% - 50px);
}

answered Sep 01 '16 at 07:17

bala

177
2
13

Set the position of a block in the middle of the page with adjusting its height automatically

6 Answers6

Set the position of a
block in the middle of the page with adjusting its height automatically