I'm trying to center text on a div vertically and horizontally

Question

As I said in the title, I am trying to center the text on a div - vertically and horizontally, but without success. Please check my code and help me to see where the problem is.

HTML Code:

<div id="wrapper">
        <div id="top">
            <div class="container-fluid text-center">
                <div id="top-rectangle" class="mid">
                        <p>
                        Hello, text and text.
                        </p>
                        <p>
                        More text
                        </p>
                </div>
            </div>
        </div>

CSS Code:

body {
        height: 100%;
        margin: 0;
}
#wrapper {
        display: table;
        width: 100%;
}
#top {
        height: 0;
        display: table-row;
        vertical-align: middle;
}
#top-rectangle {
        height: 450px;
        background-image:  url("http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg");
        background-size: cover;
        color: white;
}
.midSection {
        text-align: center;
        vertical-align: middle;
        display: table-cell;
}

JSFIDDLE: https://jsfiddle.net/krgtdomh/

Note: Please know that I searched an answer and I saw some, but I still don't understand whats wrong with my code that the text doesn't center.

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

Check this: https://jsfiddle.net/krgtdomh/1/

I've added:

.outer {
    display: table;
    position: absolute;
    height: 450px;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto; 
    width: /*whatever width you want*/;
}

And I've added display:block; to #top-rectangle and changed the height to 450px.

I used this answer to get there

score 1 · Answer 2 · answered Jan 12 '16 at 16:54

It looks like your CSS code is fine, but there is a mistake:

In CSS you use: midSection In html: class="mid"

As you can see this way the names are different and css is not used, here is a fix:

https://jsfiddle.net/krgtdomh/2/

I've also added a width to your div:

#top-rectangle {
        height: 450px;
        width: 450px;
        background-image:  url("http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg");
        background-size: cover;
        color: white;
}

Thank you! But I dont want a 450px width, I want full screen (100%), and when Im trying to change it to 100% Its doesnt work. can you check it? — Web R, Jan 12 '16 at 17:03

score 0 · Answer 3 · answered Jan 12 '16 at 16:59

For center the div .midSection vertically and horizontally

CSS

.midSection{
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}

I'm trying to center text on a div vertically and horizontally

3 Answers3