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

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

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

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

什么好主意吗?

当前回答

你可以在父div中使用flex属性，并将margin:auto属性添加到子条目中:

.parent {
    display: flex;
    /* You can change this to `row` if you want the items side by side instead of stacked */
    flex-direction: column;
}

/* Change the `p` tag to what your items child items are */
.parent p {
    margin: auto;
}

你可以在这里看到更多flex的选项:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

2018-06-26 10:33:34

其他回答

我总是在容器中使用以下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

这适用于我(测试OK!):

HTML:

<div class="mydiv">
    <p>Item to be centered!</p>
</div>

CSS:

.mydiv {
    height: 100%; /* Or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* To compensate own width and height */
}

您可以选择50%以外的其他值。例如，25%到父母的25%的中心。

2016-12-05 20:45:24

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

2020年的方式

.parent{ 
  display: grid;
  place-items: center;
}

2020-07-24 04:06:23

使用flexbox / CSS:

<div class="box">
    <p>&#x0D05;</p>
</div>

CSS:

.box{
    display: flex;
    justify-content: center;
    align-items: center;
}

摘自《快速提示:垂直和水平居中元素的最简单方法》

2015-11-10 03:25:16

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

推荐文章

最新文章

标签