Html 数据内容文本样式和定位

我有一个div，其中包含用于悬停效果的数据内容。看起来是这样的：

HTML:

提前谢谢

jsiddle:

尝试以下代码：

.teamLeft:after {
position: absolute;
width: 100%;
height: 20px;
top:calc(50% - 10px);
content: attr(data-content);
text-align:center;
color:#fff;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}

将

：after

的高度更改为

20px

然后使用top并将其更改为父div高度的

50%

-10px（

高度的一半：在
之后）。应用
文本对齐：居中
将文本水平居中

编辑

请参阅此链接；这应该会有帮助


从以下位置找到链接：
使用包装器div


.teamleft
{
位置：绝对位置；
宽度：300px；
高度：30px；
背景色：#25335a；
}
.左组：之后
{
位置：绝对位置；
宽度：300px；
高度：30px；
内容：attr（数据内容）；
颜色：#fff；
背景：rgba（0,0,0,0.6）；
不透明度：0；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
}
.teamleft:悬停：之后
{
不透明度：1；
}
#包装{背景色：#25335a；
宽度：400px；
高度：200px；}
p{左边距：50px；
顶部：calc（50%-10px）；
}



我将
.teamleft
与另一个块元素包装为flex容器（
.flexShell
），并将另一个类（
.flexItem
）添加到
.teamleft
）中，从而使内容垂直和水平居中
.flexItem
属性允许它在新的父级
中居中



HTML
定位和样式就在
.teamleft:after
选择器中处理。只需添加相关的CSS属性。否则，如果您解释您在样式和/或定位的哪一部分遇到问题，可能会有所帮助。看起来是这样的。teamleft:after selector用于悬停块。除了文本对齐样式外，数据内容内部的文本位置不会更改。对不起，我很困惑。你必须解释清楚你想做什么。你不能独立于
：在
伪元素之后定位文本，但是你可以控制填充、行高等。根据你想做什么，你当前的设置可能会也可能不可能做到-但是因为我们不知道你想做什么，所以说不出来。我不想垂直居中我的文本。好的，谢谢你在评论中发表这篇文章，但也请在有问题的地方发表。它会让更多的人看到它。它的中心文本，但我需要一个100%的高度div哦，我记得在某个地方读过一个方法来做到这一点。。。让我做些调查。你会在12小时内得到你的答案。我已经尝试了来自的方法，但它不起作用。我不知道，也许在我的设置中不可能。
teamleft
{
position: absolute;
width:50%;
height: 100%;
background-color: #25335a;
}
.teamleft:after
{
position: absolute;
width: 100%;
height: 100%;
content: attr(data-content);
color:#fff;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.teamleft:hover:after
{
opacity:1;
}

.teamLeft:after {
position: absolute;
width: 100%;
height: 20px;
top:calc(50% - 10px);
content: attr(data-content);
text-align:center;
color:#fff;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}

<main class="flexShell">
    <div data-content="TEXT THAT IS POSITIONED DEAD CENTER! THIS ADDED TEXT IS TO TEST THE WIDTH AND WRAPPING CAPABILITIES" class="teamleft flexItem">
   </div>
</main>

/*=-=-[ RESET PROPERTIES ]-=-=*/
/* http://goo.gl/3ed2H */
html {
    box-sizing: border-box;
    font: 500 16px/1.5 Consolas;
}
*, *:before, *:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
    border: 0;
}
/*=-=-[ FLEXBOX CLASSES ]-=-=*/
/* https://goo.gl/WySM2z */
.flexShell {
    display: flex;
    display: -webkit-flex;
    position: relative;
    overflow-y: none;
}
.flexItem {
    flex: 1 0 auto;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    overflow-y: none;
}
/*=-=-[ TEAMLEFT ]-=-=*/
.teamleft {
    position: absolute;
    width: 50vw;           /* http://goo.gl/DkXR5F */
    height: 100vh;
    background-color: #25335a;
}
.teamleft:after {
    position: absolute;
    left: 25%;             /* https://goo.gl/S1mNoN */
    top: 50%;
    content: attr(data-content);
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    text-align: center;
    width: 50%;             
    background-color: transparent;
    display: table-cell;      /* https://goo.gl/lzmCyg */
    overflow-y: none;        /* https://goo.gl/o1Oqbf */
}
.teamleft:hover:after {
    opacity: 1;
}