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

这个问题在这里已经有了答案：

我如何垂直居中文本与CSS？ 34个答案

---

选中此项：https：//jsfiddle.net/krgtdomh/1/

我已经添加：

.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*/;
}

我添加了display:block; 到#top-rectangle并将高度更改为450px。

我用这个答案去那里

---

它看起来像你的CSS代码很好，但有一个错误：

在CSS中使用： midSection在html： class="mid"

正如你所看到的，这个名字是不同的，并且不使用css，这里有一个解决方法：

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

我也为你的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;
}

---

用于居中div .midSection垂直和水平

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/41663.html

上一篇: I'm trying to center text on a div vertically and horizontally

下一篇: align with inline elements