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

This question already has an answer here:

How do I vertically center text with CSS? 34 answers

---

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

---

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;
}

---

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%);
}

链接地址: http://www.djcxy.com/p/41664.html

上一篇: 在绝对中心的球体中垂直居中文本

下一篇: 我试图垂直和水平居中文本在一个div上