Element not coming to center. I am using absolute?

Question

div #introbox is not centering. I have used container as relative and introbox as absolute. I have set top,bottom,left and right as 0. Still box is not centring. I want to centre the introbox in the intropic.

html,body{
     padding: 0;
     margin:0;
    }
    
    
    .container{
     width: 960px;
     margin:0 auto;
     position: relative;
    }
    
    #header{
     width: 100%;
     height: 120px;
     border-bottom: 1px solid black;
    }
    
    
    #nav{
     height: 55px;
     border-bottom: 4px solid lightblue ;
    }
    
    #intro-pic{
     height: calc(100vh - 181px);
     width: 100%;
     background: url("img/introbg.jpg") center fixed;
    }
    
    #intro-box{
     height: 55vh;
     width: 800px;
     background: rgba(0,0,0,0.74);
     border-radius: 15px;
     position: absolute;
      top: 0px;
      bottom: 0px;
      right: 0px;
      left:0px;
    }

<div id="header">
     <div class="container">
      Header
     </div>
    </div>
    
    <div id="nav">
     <div class="container">
      Nav
     </div>
    </div>
    
    <div id="intro-pic">
     <div class="container">
      <div id="intro-box">
       sdfdsfds
      </div>
     </div>
    </div>

It seems to be working in the code snippet I made for your code when on full screen. — Wold, Jan 15 '15 at 10:21
possible duplicate of [Center Align on a Absolutely Positioned Div](http://stackoverflow.com/questions/252856/center-align-on-a-absolutely-positioned-div) — Paulie_D, Jan 15 '15 at 10:23

Paulie_D · Accepted Answer · 2015-01-15T11:37:01.000

2

Using transform:translate will work for any size div.

html,
body {
  padding: 0;
  margin: 0;
  height:100%;
}
.container {
  width: 960px;
  margin: 0 auto;
  position: relative;
  height:100vh;
}
#intro-box {
  height: 55vh;
  width: 800px;
  background: rgba(0, 0, 0, 0.74);
  border-radius: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  /* vertical centering */
}

<div id="intro-pic">
  <div class="container">
    <div id="intro-box">
      sdfdsfds
    </div>
  </div>
</div>

edited Jan 15 '15 at 11:37

answered Jan 15 '15 at 10:28

Paulie_D

107,962
13
142
161

I want it to be vertically centered! – Jan 15 '15 at 10:40
Updated to center vertically – Paulie_D Jan 15 '15 at 11:37

shanidkv · Answer 2 · 2015-01-15T10:28:29.900

Find the below code.

Make left position 50% and give margin-left half of the wrapper width value.

#intro-box{
    height: 55vh;
    width: 800px;
    background: rgba(0,0,0,0.74);
    border-radius: 15px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left:50%;
    margin-left: -400px; /* Half of the wrapper width */
}

Try below example if you are trying exact center (from top & left)

#intro-box{
    height: 55vh;
    width: 800px;
    background: rgba(0,0,0,0.74);
    border-radius: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -400px; /* Half of the wrapper width */
    margin-top: -27.5vh; /* Half of the wrapper height*/
}

JSFIDDLE DEMO

Ghassan Elias · Answer 3 · 2015-01-15T10:31:26.830

0

#intro-box {
    height: 55vh;
    width: 800px;
    background: rgba(0,0,0,0.74);
    border-radius: 15px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -400px;
    margin-top: -27.5vh;
}

But again, .container should have height over or equal to #intro-box

edited Jan 15 '15 at 10:31

answered Jan 15 '15 at 10:24

Ghassan Elias

2,213
1
14
17

score 0 · Answer 4 · answered Aug 04 '16 at 09:48

There are many ways to center Elements:

using line-height:

you want to center text and you know the size of the box:

.box { background: red; height: 200px; }
.box span { display:block; text-align: center; line-height: 200px; }

<div class="box">
  <span>Text</span>
</div>

using transform:

you want to center anything but dont know the size of your box:

.box, .box2 { background: red; height: 200px; }
.box span { top: 50%; text-align: center; position: relative; display: block; transform: translateY(-50%) }
.box2 span { top: 50%; left: 50%; position: relative; display: inline-block; transform: translate(-50%, -50%) }

<div class="box">
  <span>Text</span>
</div>

OR WITHOUT TEXT-ALIGN:
<div class="box2">
  <span>Text</span>
</div>

using absolute position:

you know the height of the element you want to center

.box, .box2 { background: red; height: 200px; position: relative; width: 100%; }
.box span { position: absolute; background: green; height: 50px; width: 50px; top: 50%; left: 50%; margin: -25px 0 0 -25px; }

<div class="box">
  <span></span>
</div>

There are even more ways to manage this.

Element not coming to center. I am using absolute?

4 Answers4