我有一个div设置显示:块(90px高和宽)，我有一些文本在里面。
我需要文本在中心垂直和水平对齐。
我已经尝试了text-align:center，但它不做垂直居中部分，所以我尝试了vertical-align:middle，但它不起作用。
什么好主意吗?
当前回答
将这个CSS类赋给目标<div>:
.centered { 宽度:150 px; 身高:150 px; 显示:flex; 对齐项目:中心; justify-content:中心; text-align:中心; 背景:红色;/*不需要只是为了清楚地看到结果*/ ｝ <div class="居中">这个文本水平和垂直居中</div>
其他回答
将这个CSS类赋给目标<div>:
.centered { 宽度:150 px; 身高:150 px; 显示:flex; 对齐项目:中心; justify-content:中心; text-align:中心; 背景:红色;/*不需要只是为了清楚地看到结果*/ ｝ <div class="居中">这个文本水平和垂直居中</div>
这应该是正确答案。最干净最简单:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
你可以尝试非常简单的代码:
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
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style ="text-align: center;">Center horizontal text</div>
<div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
</body>
</html>
2020年的方式
.parent{
display: grid;
place-items: center;
}
