我有一个div设置显示:块(90px高和宽)，我有一些文本在里面。
我需要文本在中心垂直和水平对齐。
我已经尝试了text-align:center，但它不做垂直居中部分，所以我尝试了vertical-align:middle，但它不起作用。
什么好主意吗?
当前回答
在父div中添加以下代码
display: grid;
place-items: center;
其他回答
你可以尝试非常简单的代码:
display: flex;
align-items: center;
justify-content: center;
.box { 身高:90 px; 宽度:90 px; 背景:绿色; 显示:flex; 对齐项目:中心; justify-content:中心; ｝ < div class = "盒子" > Lorem < / div >
代码依赖链接:http://codepen.io/santoshkhalse/pen/xRmZwr
将这个CSS类赋给目标<div>:
.centered { 宽度:150 px; 身高:150 px; 显示:flex; 对齐项目:中心; justify-content:中心; text-align:中心; 背景:红色;/*不需要只是为了清楚地看到结果*/ ｝ <div class="居中">这个文本水平和垂直居中</div>
添加行显示:table-cell;到该div的CSS内容。
只有表格单元格支持vertical-align: middle;，但是你可以把[table-cell]定义给div…
一个活生生的例子在这里:http://jsfiddle.net/tH2cc/
div{
height: 90px;
width: 90px;
text-align: center;
border: 1px solid silver;
display: table-cell; /* This says treat this element like a table cell */
vertical-align:middle; /* Now we can center vertically like in a TD */
}
对我来说，这是最好的解决方案:
HTML:
<div id="outer">
<img src="logo.png">
</div>
CSS:
#outer {
position: fixed;
top: 50%;
left: 50%;
/* Bring your own prefixes */
transform: translate(-50%, -50%);
}
.cell-row{显示:表;宽度:100%;身高:100 px;background - color: lightgrey;text-align:中心} .cell{显示:table-cell} .cell-middle {vertical-align: middle} < div class = " cell-row”> <div class="cell - cell-middle">Center</div> < / div >
