Html 覆盖上的图像上载按钮…我的css有问题

我有一个轻微的问题，中心的内容覆盖-出于某种原因，我不能让这工作

html:

js:

这是我的JSFIDLE：

有谁能告诉我如何使上述JSFIDLE中概述的图像（上载按钮）和文本尽可能集中对齐…

---

我给了按钮图像一个id，然后将其设置为

float:center，以及朱利安的注释，添加
文本对齐：居中在包含部分。
请找到下面的代码片段，如果这是您想要的，请告诉我

我将上传按钮HTML包装在一个div（类图像容器）中，并使用

.image-container{
        top: 50%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
    }


$（“输入[type='image']）。单击（函数（）{
$（“输入[id='upload_image']）。单击（）；
});
.avatar容器{
位置：相对位置；
宽度：100%；
}
.化身图像{
不透明度：1；
显示：块；
过渡：放松；
背面可见性：隐藏；
保证金：0自动；
}
.头像覆盖{
过渡：放松；
不透明度：0；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：转换（-50%，-50%）
}
.avatar容器：悬停.avatar图像{
不透明度：0.3；
}
.avatar容器：悬停.avatar覆盖{
不透明度：1；
}
.avatar-overlay\u文本{
宽度：200px；
高度：200px；
边界半径：100%；
背景色：#4CAF50；
颜色：白色；
字体大小：16px；
文本对齐：居中；
}
.图像容器{
最高：50%；
左：50%；
位置：绝对位置；
转换：翻译（-50%，-50%）；
}

JS-Bin
上传图像
只需在CSS中添加以下代码：

.avatar-overlay__text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

工作小提琴：

我只是在fiddle的CSS部分的末尾添加了上面的CSS代码。
如果你是说在中间作为一列对齐，那么只需在.avatar-overlay_uutext class@Julian Espinosa上添加文本align:center-看起来你使用的是旧版本的JSFIDLE-我很抱歉。我已经用你的建议更新了它，不幸的是它不起作用。然而，你所说的似乎对以前的情况起了作用？真的吗？是的，他试过了-它不起作用。在我更新的JSFIDLE上试用过-不起作用。不，伙计，它将适用于以下情况：旧的iOS 6、Safari 3.1-6、BB7、TWEENER-IE 10、新的Safari 6.1+。iOS 7.1+，BB10，全新，Spec-Firefox，Chrome，Opera。在我接受回答之前，我会尝试实现这些东西并做一些测试。当然，kool deal:）Yeh使用Turbo浏览器沙箱测试了这个，但还没有发现任何问题。很棒的东西。
$("input[type='image']").click(function() {
  $("input[id='upload_image']").click();
});

.image-container{
        top: 50%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
    }

.avatar-overlay__text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}