Centering a div both horizontally and vertically at all times on a responsive parent

Question

I have a header that I would like to keep centered inside a parent image div both horizontally and vertically at all times when the parent div does not have a fixed width and height but instead has a responsive width and height using Twitter Bootstrap 3.1's responsive columns.

HTML:

<div id ="firstholder" class= " col-sm-4 col-md-4 col-lg-4">
    <a href="home.html" title="Home" class="imglink"> 
        <div class="item1"><h1 class="slickfont1" >Home</h1>
        </div><img src="/images/slide2.JPG" alt="City Lights Image"  class="img-responsive" >
    </a>
</div>


#firstholder {
    display:inline-block;
    float:left;
    margin:0;
    padding:0;
    height:auto;
    position:relative;
}


a.imglink  {
    background:  #fff;
    display: inline-block;
    width:100%;
    height:auto;
    position:relative;
}

.item1 {
    height:150px;
    width: 150px;
    margin: 0 auto;
    position:absolute;
    z-index:100;
    vertical-align:middle;
}

.slickfont1 {
    z-index:10;
    color: #fff;
    position:absolute;
    font-family: 'Bowlby One SC', cursive;
    font-size: 37px;
    font-weight:lighter;  
    position: absolute;
    text-shadow:0 0 0 transparent, -2px 2px 2px  #1542bd;
}

Thanks :)

hi @SULTAN here is a link to the fiddle I made http://jsfiddle.net/W2DfT/ I just cannot figure out how to get images on there... — Elias7, Mar 23 '14 at 05:42
http://stackoverflow.com/questions/22575851/how-do-i-vertically-align-elements-within-a-div-in-css/22575885#22575885 duplicate, or atleast very similar. — David, Mar 23 '14 at 05:43
@David Im trying to make sure the div is always centered both horizontally and vertically....not sure that is a duplicate — Elias7, Mar 23 '14 at 05:51
What div (ID) do you want always centered? I'm having a hard time figuring out exactly what you want centered. — David, Mar 23 '14 at 05:57
possible duplicate of [Best way to center a
on a page vertically and horizontally?](http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally) — apaul, Mar 23 '14 at 06:12
Watch this codepen (the absolute centering) http://codepen.io/shshaw/pen/gEiDt — Bangash, Mar 24 '14 at 12:36

score 3 · Answer 1 · answered Mar 24 '14 at 12:43

You can use this nice method by Chris Coyier at CSS Tricks, he uses percentages and CSS3's transform:translate to achieve what you need. Centering Percentage Width/Height Elements
Now as you're using Bootstrap, so you're to tweak it for yourself.

The code from Chris Coyier:

.center {
  position: absolute;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  width: 40%;
  height: 50%;
}

Better to go to CSSTricks (using above link) and study the whole Post (you'll also find the reason of using it and why its better than other methods of centring). I hope this helped you.

score 1 · Answer 2 · answered Mar 23 '14 at 06:26

1

I am not sure if I understood you right, but let's start from here:

CSS:

div.center {
  display: table-cell;
  width: 200px;
  height: 200px;
  vertical-align: middle;
  text-align: center;
    border: 1px solid #000;
    background-color: #ccc;
}

div.inner {
    margin: 0 auto;
}

HTML:

<div class="center">
    <div class="inner">
        <div class="title">
            Title Here
        </div>
    </div>
</div>

Is this what you are trying to do? assuming the gray background is an image? SAMPLE HERE

answered Mar 23 '14 at 06:26

SULTAN

1,119
4
12
25

YES that is exactly what I am trying to do but my div.center (#firstholder) has a variable width and height, not fixed. – Elias7 Mar 23 '14 at 06:35
From my above HTML, the width is col-sm-4 col-md-4 col-lg-4 (twitter bootstraps responsive columns) and the height varies based on what screen width you are in – Elias7 Mar 23 '14 at 06:36
@whatIsperfect Okay, good then. Just make `width:auto; height:auto;` in the `div.center` - and, add padding to `div.inner` - here is the updated fiddle: http://jsfiddle.net/fYcE2/1/ – SULTAN Mar 23 '14 at 06:41
@whatIsperfect P.S. Also, you can of-course remove the `width` and `height` from the `.div.center` – SULTAN Mar 23 '14 at 06:43
thanks so much for the help...when I put width:auto, my picture size distorts because I already specify the width using Twitter Bootstrap's predefined column width. Then I tried not specifying the width or height on div.center and still no luck :( – Elias7 Mar 23 '14 at 06:54
I'm using a workaround for now by just assigning margin-left:38%; & margin-top:25%; to the inner div. Have a look for yourself at the three centered images: www.getcitylights.com – Elias7 Mar 23 '14 at 06:57

Centering a div both horizontally and vertically at all times on a responsive parent

2 Answers2