如何水平和垂直居中对齐div中的文本？

Question

我们如何在这个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;
}

Answer 1

这里有完整的解释。读这个。

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

如果你想垂直＆amp;水平中心到未知高度，宽度元素。您必须将父样式添加为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
}

Answer 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;
}

---

截图

Answer 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

Answer 4

还有另一种常见的技术，基于＆＃34;绝对定位＆＃34;和负的上限。

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％，然后用负边距顶部向上移动一半高度。

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

为避免此费用计算，解决方法是将margin-top替换为transform: translateY(-50%);。在这种情况下，通过CSS变换在视觉上获得对中心DIV的负向平移。

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