我们如何在这个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;
}
答案 0 :(得分:2)
这里有完整的解释。读这个。
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
}
答案 1 :(得分:1)
关于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;
}
截图
答案 2 :(得分:0)
<强> 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 强>
答案 3 :(得分:0)
还有另一种常见的技术,基于&#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渲染中提取的。