我如何能中心文本(水平和垂直)在一个div块?

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

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

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

什么好主意吗?

当前回答

应用样式:

position: absolute;
top: 50%;
left: 0;
right: 0;

无论长度如何，文本都将居中。

2017-04-26 13:08:50

其他回答

对我来说，这是最好的解决方案:

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%);
}

2019-08-14 09:58:48

我总是在容器中使用以下CSS，使其内容水平和垂直居中。

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

在这里查看它的实际操作:https://jsfiddle.net/yp1gusn7/

2015-08-23 08:48:21

<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv {
        height: 450px;
        background: #f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p {
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="maindiv">
      <h1>Title</h1>
    </div>
  </body>
</html>

2017-03-17 05:25:10

你可以尝试非常简单的代码:

  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

2016-12-16 10:07:37

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

2017-09-27 16:17:45

我如何能中心文本(水平和垂直)在一个div块?

推荐文章

最新文章

标签