How to vertically center align div having back ground image

Question

I have an outer div and an inner div. Inner div has background-image.

How to vertically center align inner div image?
I dont want to use margin-top

use **flex** , as [**JSFiddle**](http://jsfiddle.net/vivekkupadhyay/mcUHb/252) — vivekkupadhyay, Oct 07 '15 at 12:22
I have `span` and `div` [Updated Fiddle](http://jsfiddle.net/mcUHb/262/). — ozil, Oct 07 '15 at 12:45

score 1 · Answer 1 · answered Oct 07 '15 at 12:25

1

Use this CSS. You'll have that Google logo centered vertically.

#imgDiv {
    width: 300px;
    height: 100px;
    background-image: url("http://www.google.com/intl/en_com/images/srpr/logo3w.png");
    background-repeat: no-repeat;
    border: 1px solid blue;

    position:relative;
    top: 50%;
    -moz-transform: translatey(-50%);
    -ms-transform: translatey(-50%);
    -o-transform: translatey(-50%);
    -webkit-transform: translatey(-50%);
    transform: translatey(-50%);
}

answered Oct 07 '15 at 12:25

Xahed Kamal

2,203
1
20
41

I have `span` and `div` [Updated Fiddle](http://jsfiddle.net/mcUHb/262/). – ozil Oct 07 '15 at 12:44
What are you trying to do now? – Xahed Kamal Oct 07 '15 at 12:46
both vertically align as `span` is aleady – ozil Oct 07 '15 at 12:47
Your span is not really vertically center. You used 400px as line-height. If screen's/container's height increases it wont be in center. – Xahed Kamal Oct 07 '15 at 12:49

score 1 · Answer 2 · answered Oct 07 '15 at 12:27

1

You can translate this with some simple CSS. Use the "position" property.

#parentDiv {
    position: relative;
}

#childDiv {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

answered Oct 07 '15 at 12:27

I have `span` and `div` [Updated Fiddle](http://jsfiddle.net/mcUHb/262/). – ozil Oct 07 '15 at 12:44

G.L.P · Answer 3 · 2015-10-07T12:55:41.847

1

Try like this: Demo

Updated demo as per your requirement: Note: If the text height increases, the background image will move upwards

div.outer {
display:table;
border: 1px solid red;
height:300px;
width:300px
}
.inner {
    display:table-cell;
    vertical-align:middle;
    line-height:normal;
    margin:0 auto;
    text-align:center;
}
#imgDiv {
    width: 300px;
    height: 100px;
    background-image: url("http://www.google.com/intl/en_com/images/srpr/logo3w.png");
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid blue;
}
#spanid {
    text-align: center;
}

HTML:

<div class="outer">
    <div class="inner">
        <div id="imgDiv"></div> <span id="spanid">Some text....</span>
    </div>
</div>

edited Oct 07 '15 at 12:55

answered Oct 07 '15 at 12:28

G.L.P

7,119
5
25
41

I have `span` and `div` [Updated Fiddle](http://jsfiddle.net/mcUHb/262/). – ozil Oct 07 '15 at 12:45
I want `google` image to align with `span` (moves down to span level) – ozil Oct 07 '15 at 13:01

score 1 · Answer 4 · answered Oct 07 '15 at 12:31

Easiest way would be to set the height of #imgDiv to height:100%; and then set the background-position to center, center.

#imgDiv {
    width: 300px;
    height: 100%;
    background-image: url("http://www.google.com/intl/en_com/images/srpr/logo3w.png");
    background-repeat: no-repeat;
    border: 1px solid blue;
    background-position:center,center;
}

score 0 · Answer 5 · answered Oct 07 '15 at 12:28

You can use display flex to make it working! Here is the Demo.

#imgDiv {
        width: 500px;
        height: 100px;
        background-image: url("http://www.google.com/intl/en_com/images/srpr/logo3w.png");
        background-repeat: no-repeat;
        border: 1px solid blue;
        margin: auto;
    }
    .outerDiv {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        border: 1px solid red; 
        height:300px; 
        width:300px;
    }

score 0 · Answer 6 · answered Oct 07 '15 at 13:08

Parent to add display: table; Child to add display:table-cell; and vertical-align:middle;.If you want background center child to add background-position: center center;

#imgDiv {
    width: 300px;
    height: 100px;
    background-image: url("http://www.google.com/intl/en_com/images/srpr/logo3w.png");
    background-repeat: no-repeat;
    border: 1px solid blue;
    display: table-cell;
    vertical-align: middle;
}

<div style="position:relative; border: 1px solid red; height:300px; width:300px; display: table;">
    <div id="imgDiv"> Hello Vertical Middle !! </div>
</div>

How to vertically center align div having back ground image

6 Answers6