如何水平和垂直居中对齐 div 中的文本？ [复制]答案

【问题标题】：How to horizontally and vertically center align the text in the div? [duplicate]如何水平和垂直居中对齐 div 中的文本？ [复制]
【发布时间】：2014-05-25 15:06:01
【问题描述】：

我们如何才能使这个 div 中的文本居中（水平和垂直）？

HTML

<div class="text">   
hello is the the testhello is the the testhello is the the testhello is the the testhello is the the testhello is the the    
testhello is the the tes   
</div>

CSS

.text {
    width:150px; 
    background:red;
    float:left;
    height:150px;
    margin:10px; 
    text-align:center;
    word-wrap:break-word;
    overflow:hidden;
    color:white;
}

【问题讨论】：

This should answer your question.

标签： css

【解决方案1】：

这里是完整的解释。阅读本文。

http://css-tricks.com/centering-in-the-unknown/

如果你想垂直和水平中心到未知的高度，宽度元素。您必须将父样式添加为 display:table，将子样式添加为 display:table-cell。

//更新

如果您知道元素的高度和宽度。

试试这个。

.parent {
  display:block;
  position:relative;
}

.child {
  display:block;
  height:x;
  width:y;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-x/2; //Half of the height with minus direction
  margin-left:-y/2; //Half of the width with minus direction
}

【讨论】：

你能告诉我你为什么没有使用 text-align:center 吗？
Text-align:center 仅适用于横向。但是如果你想对齐垂直中心。您必须将样式作为 display:table-cell 添加到元素中。垂直对齐仅适用于 display:table-cell。并且 Display:table-cell 仅在 display:table; 内工作

【解决方案2】：

codepen 示例：http://codepen.io/anon/pen/BFqfx/

div {
  width:150px; 
  height:150px;
  line-height: 150px;
  background:red;   
  color: #fff;
}

div p {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  width: 100%;
  text-align: center;
}

截图

【讨论】：

p标签在哪里，在html正文中，在div里面？
我的 float:left;word-wrap:break-word;overflow:hidden; 怎么样？
为了简单起见，我刚刚删除了。添加所有你想要的样式
您的代码在 CodePen 中可以运行，但在我的 IE/Chrome 中无法运行，文本未对齐水平/垂直。
这是所有风格 codepen.io/anon/pen/iupys 的 codepen，它在 Chrome 上仍然可以正常工作

【解决方案3】：

DEMO

HTML

<div class="foo">
   <div class="bar">
       Unknown stuff to be centered.
   </div>
</div>

CSS

.foo{
   display: table;
   width: 100%;
}
.bar {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

Article

【讨论】：

【解决方案4】：

还有另一种常用技术，基于“绝对定位”和负上边距。

HTML：

<div class="foo">
   <div class="bar">
       Unknown stuff to be centered.
   </div>
</div>

CSS：

.foo{
   width:150px;
    height:150px;
    background:red;
    position:relative;
}
.bar {
   text-align: center;
    position:absolute;
    top:50%;
    height:40px;
    margin-top:-20px;
    border:solid 1px blue;
}

这个想法是你从内部 div 的顶部向下移动到 50%，然后用负的 margin-top 将它向上推到它的一半高度。

非常稳定且跨平台，唯一的限制是你必须知道内部div的高度。

为避免这种约束，一种解决方法是将否定的margin-top 替换为transform: translateY(-50%);。在这种情况下，通过 CSS 转换可以直观地获得对中心 DIV 的负转换。

它很有用，因为这样您可以在不知道内部 DIV 高度的情况下使用它，但请记住，转换是从 DOM 渲染中提取的。

【讨论】：

我希望 div 的高度最大为 150*150
Ok.... 你可以简单地将内部 div 的宽度和高度设置为 150px，然后对容器应用更大的宽度和高度。原理是一样的。