我有一个div设置显示:块(90px高和宽),我有一些文本在里面。

我需要文本在中心垂直和水平对齐。

我已经尝试了text-align:center,但它不做垂直居中部分,所以我尝试了vertical-align:middle,但它不起作用。

什么好主意吗?


当前回答

调整线高度以获得垂直对齐。

line-height: 90px;

其他回答

将这个CSS类赋给目标<div>:

.centered { 宽度:150 px; 身高:150 px; 显示:flex; 对齐项目:中心; justify-content:中心; text-align:中心; 背景:红色;/*不需要只是为了清楚地看到结果*/ } <div class="居中">这个文本水平和垂直居中</div>

方法1

div { 身高:90 px; 行高:90 px; text-align:中心; 边界:2px虚线#f69c55; } < div > 你好,世界! ! < / div >

方法2

div { 身高:200 px; 行高:200 px; text-align:中心; 边界:2px虚线#f69c55; } 跨度{ 显示:inline-block; vertical-align:中间; 行高:正常; } < div > <span>我与你同在,我与你同在。对我说,对我说,对我说。非enim iam stirpis bonum quaeret, sed animalis。< / span > < / div >

方法3

div { 显示:表; 身高:100 px; 宽度:100%; text-align:中心; 边界:2px虚线#f69c55; } 跨度{ 显示:表格单元; vertical-align:中间; } < div > <span>神圣的神圣,神圣的神圣。</span> < / div >

试试下面的例子。我为每个类别添加了示例:水平和垂直

<!DOCTYPE html>
<html>
    <head>
        <style>
            #horizontal
            {
                text-align: center;
            }
            #vertical
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
         </style>
    </head>
    <body>
         <div id ="horizontal">Center horizontal text</div>
         <div id ="vertical">Center vertical text</div>
    </body>
</html> 
<!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> 

.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 >