如何在DIV中垂直和水平居中显示文本

Question

<div style="background: url('theImages/talentQuote.png') no-repeat center; background-size: 100% 100%; min-height: 125px; min-width: 125px; text-align: center; vertical-align: middle;">
    <span style="color: #FFF; font-weight: bold;"><xsl:value-of select="txtQuote" /></span>
</div>

显示：

如何修改CSS，因此引用始终位于背景图像的中心

Answer 1

试试这个：

<div class="bubble">
    <p>blablabla</p>
</div>

.bubble { 
  position: absolute; 
  background: #cccccc;
  width: 135px; 
  height: 84px; 
  display: table; 
}

.bubble p {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
}

这是一个小提琴：http://jsfiddle.net/hLwzymmL/

Answer 2

取决于您是想要水平还是垂直居中：

水平您应该将这些样式提供给对象：

仅限文字：

#parent {
text-align: center;
}

对于文字以外的对象：

#child {
margin-left: auto;
margin-right: auto;
}

或

#child {
margin-left: 0 auto;
}

---

垂直它有点困难，您必须将display: table设置为父级，将display: table-cell设置为子级，以便您可以设置样式{ {1}}给孩子。

vertical-align: middle

JSFiddle demo

Answer 3

您只需将外部容器设置为display:table;，将内部容器设置为display:tabe-cell;

div{
    display:table;
    text-align: center; 
}

span{
    display:table-cell;
    vertical-align: middle;
}

vertical-align: middle;仅适用于表格元素。

Answer 4

演示 - http://jsfiddle.net/victor_007/hLwzymmL/1/

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

Answer 5

这样做：

HTML标记：

<div class="wrapper">
    <span class="middleelement">This is some text..</span>
</div>

CSS：

div.wrapper {
background: #008000;
background-size: 100% 100%;
text-align: center;
display: table;
width: 100%;
height: 285px;
}
.middleelement {
color: #FFF;
font-weight: bold;
display: table-cell;
vertical-align: middle;
}

这里的演示： http://jsfiddle.net/e16uhcrz/2/