如何在DIV中垂直和水平居中文本[重复]

Posted 2023-03-04

【中文标题】如何在DIV中垂直和水平居中文本[重复]

【英文标题】：How to center text within a DIV vertically and horizontally [duplicate]

【发布时间】：2014-12-25 04:59:49

【问题描述】：

<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，使引号始终在背景图像中居中

【问题讨论】：

复制网上一个很常见的问题，先搜索再问！

【参考方案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/

【讨论】：

我应该在哪里添加填充以使文本不会溢出到 DIV 上？

inside .bubble p / 类似的东西：.bubble p display: table-cell;垂直对齐：中间；文本对齐：居中；填充：0 20px；

【参考方案2】：

这取决于你是要水平居中还是垂直居中：

水平你应该给对象这些样式：

仅适用于文字：

#parent 
text-align: center;

对于文本以外的对象：

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

或：

#child 
margin-left: 0 auto;

---

垂直有点困难，你得把display: table设置为父，display: table-cell设置为子，这样你就可以给子设置样式vertical-align: middle了。

#parent 
display: table;


#child 
display: table-cell;
vertical-align: middle;

JSFiddle demo

【讨论】：

感谢您的回复。投票赞成

【参考方案3】：

您可以简单地将外部容器设置为display:table;，将内部容器设置为display:tabe-cell;

div
    display:table;
    text-align: center; 


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

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

【讨论】：

感谢您的回复。

【参考方案4】：

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

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

【参考方案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/

【讨论】：

感谢您的回复。