Html 在图像上垂直和水平居中放置绝对div

我试图将

div

置于图像的中心。我不确定这里出了什么问题。我现在也对定位和对齐感到困惑，我可能也需要做一些工作。谢谢你们的意见，伙计们

.template横幅{
宽度：100%；
高度：自动；
保证金：0；
}
.模板横幅wrpr{
宽度：100%；
高度：500px；
}
.模板横幅img{
内容：url（“../img/template banner.jpg”）；
宽度：100%；
高度：500px；
}
.tbanner-reg-wrpr1{
宽度：100%；
高度：500px；
}
.T班纳注册公司{
宽度：100%；
位置：绝对位置；
最高：50%；
右图：-50%；
保证金：0自动；
高度：500px；
}
.t退火炉注册说明{
宽度：680px；
浮动：左；
高度：285px；
}
.tbanner注册表输入{
宽度：270px；
浮动：左；
背景色：rgb（247）；
边界半径：5px；
填充：10px25px25px25px；
高度：250px；
}
.tbanner注册表输入p{
字体大小：20px；
字体大小：粗体；
}
.T班纳酒店{
背景色：#ff3b30；
边框：实心#ff3b30 1px；
边框颜色：#ff3b30；
颜色：白色；
字体大小：粗体；
}
.tbanner regemail、.tbanner regpsw、.tbanner regpnumber、.tbanner loginb{
宽度：100%；
填充：10px；
保证金：5px0px 10px 0px；
边界半径：5px；
边框宽度：1px；
边框样式：线条；
边框颜色：rgb（249249249）；
}
.模板功能{
宽度：100%；
高度：自动；
文本对齐：居中；
背景色：rgb（246244245）；
}

标题第1分部
Text hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText
注册/图像

绝对定位在距离顶部和左侧50%的位置，使用容器的50%来定位子容器。从顶部和左侧平移元素（50%）的变换将使用50%的元素自己的尺寸，您将得到一个居中的元素

使用内联块、网格、flexbox或需要最少css的简单浮点，可以轻松实现两列布局

.container{
背景图片：url(http://farm5.staticflickr.com/4615/24977545657_f984bbaec2_b.jpg);
高度：400px；
边框：5px纯黑；
位置：相对位置；
}
.内容包装器{
最小高度：100px；
高度：100px；
最大宽度：80%；
宽度：300px；
位置：绝对位置；
最高：50%；
左：50%；
转化：translateX（-50%）translateY（-50%）；
边框：5px纯红；
}
.content包装器div{
宽度：50%；
身高：100%；
框大小：边框框；
浮动：左；
背景：#fff；
}
.左栏{
边框：5px纯橙；
}
.右栏{
边框：5px固体青色；
}

---

这是我的代码来解决您的问题

我被

tbanner reg wrpr

并添加

transform:translate（-50%，-50%）

和
。模板横幅
需要将
位置
更改为
相对


.template横幅{
宽度：100%；
高度：自动；
保证金：0；
位置：相对位置；
}
.模板横幅wrpr{
宽度：100%；
高度：500px；
}
.模板横幅img{
内容：url（“http://lorempixel.com/g/400/200/");
宽度：100%；
高度：500px；
}
.tbanner-reg-wrpr1{
宽度：100%；
高度：500px；
}
.T班纳注册公司{
位置：绝对位置；
最高：50%；
左：50%；
保证金：0自动；
转换：翻译（-50%，-50%）；
背景：#0000006b；
}
.t退火炉注册说明{
宽度：200px；
浮动：左；
高度：285px；
}
.tbanner注册表输入{
宽度：270px；
浮动：左；
背景色：rgb（247）；
边界半径：5px；
填充：10px25px25px25px；
高度：250px；
}
.tbanner注册表输入p{
字体大小：20px；
字体大小：粗体；
}
.T班纳酒店{
背景色：#ff3b30；
边框：实心#ff3b30 1px；
边框颜色：#ff3b30；
颜色：白色；
字体大小：粗体；
}
.tbanner regemail、.tbanner regpsw、.tbanner regpnumber、.tbanner loginb{
宽度：100%；
填充：10px；
保证金：5px0px 10px 0px；
边界半径：5px；
边框宽度：1px；
边框样式：线条；
边框颜色：rgb（249249249）；
}
.模板功能{
宽度：100%；
高度：自动；
文本对齐：居中；
背景色：rgb（246244245）；
}

标题第1分部
Text hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText
注册/图像

这是我的

我使用flex box，
我肯定会研究flexbox，甚至css网格，这比使用浮动来创建此类布局要容易得多，flexbox上有很多非常好的教程，非常容易理解，肯定会帮助您超越最佳解决方案：）谢谢！我想我走的是同一条路唯一的区别是我没有把我的图像作为背景放在里面，但它是在不同的div上分开的。
<div class="wrapper">
  <div class="content">
     <div class="left"></div>
     <div class="right"></div>
  </div>
</div>

.wrapper{border:1px solid red;width:100%;height:200px;display:flex;justify-content:center}
.content{width:200px;border:1px solid red;margin:20px;display:block;display:flex;justify-content:center}
.left{border:1px solid green;width:40%;display:inline-block}
.right{border:1px solid yellow;width:40%;display:inline-block}