CSS中心文本(水平和垂直)在div块内

Question

我div有一套display:block.(90px height和width)我里面有一些文字.

我需要文本在垂直和水平方向上对齐.

我试过了text-align:center,但它不做水平部分,所以我试过vertical-align:middle但它没有用.

有任何想法吗？

Answer 1

如果它是一行文本和/或图像,那么很容易做到.只是用

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

而已.如果它可以是多行,那么它会更复杂一些.但是http://pmob.co.uk上有解决方案. 寻找"垂直对齐".

因为它们往往是黑客攻击或添加复杂的div ...我通常使用带有单个单元格的表格来做...尽可能简单.

2016/2017年更新:

它可以更常用transform,并且即使在IE10和IE11等旧版浏览器中也能很好地工作.它可以支持多行文本:

position: relative;
top: 50%;
transform: translateY(-50%);

示例:https://jsfiddle.net/wb8u02kL/1/

收缩包装宽度:

上面的解决方案使用固定宽度的内容区域.要使用收缩包装宽度,请使用

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

示例:https://jsfiddle.net/wb8u02kL/2/

我尝试过flexbox,但它没有得到广泛的支持,因为它会破坏一些旧版本的IE,如IE10.

Answer 2

截至2014年的常用技术:

• 方法1 - transform translateX/ translateY:

  示例此处 /全屏示例

  在支持的浏览器(大多数)中,您可以使用top: 50%/ left: 50%组合 translateX(-50%) translateY(-50%)动态地垂直/水平居中元素.

  .container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
  }
  

• 方法2 - Flexbox方法:

  示例此处 /全屏示例

  在支持的浏览器中,将display目标元素设置为flex并align-items: center用于垂直居中和justify-content: center水平居中.只是不要忘记添加供应商前缀以获得额外的浏览器支持(参见示例).

  html, body, .container {
      height: 100%;
  }
  .container {
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

• 方法3 - table-cell/ vertical-align: middle:

  示例此处 /全屏示例

  在某些情况下,您需要确保将html/ bodyelement的高度设置为100%.

  对于垂直对齐,请将父元素的width/设置height为100%并添加display: table.然后对于子元素,更改display为table-cell并添加vertical-align: middle.

  对于水平居中,您可以添加text-align: center文本和任何其他inline子元素的居中.或者,您可以使用margin: 0 auto假设元素是block水平的.

  html, body {
      height: 100%;
  }
  .parent {
      width: 100%;
      height: 100%;
      display: table;
      text-align: center;
  }
  .parent > .child {
      display: table-cell;
      vertical-align: middle;
  }
  

• 方法4 - 50%从顶部绝对定位位移:

  示例此处 /全屏示例

  此方法假定文本具有已知高度 - 在本例中为18px.只需50%从顶部相对于父元素绝对定位元素.使用负值margin-top,该负值是元素已知高度的一半,在这种情况下 - -9px.

  html, body, .container {
      height: 100%;
  }
  .container {
      position: relative;
      text-align: center;
  }
  .container > p {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      margin-top: -9px;
  }
  

• 方法5 - line-height方法(最不灵活 - 未建议):

  这里的例子

  在某些情况下,父元素将具有固定的高度.对于垂直居中,您所要做的就是line-height在子元素上设置一个等于父元素固定高度的值.

  虽然这种解决方案在某些情况下会起作用,但值得注意的是,当存在多行文本时它将不起作用 - 就像这样.

  .parent {
      height: 200px;
      width: 400px;
      text-align: center;
  }
  .parent > .child {
      line-height: 200px;
  }
  

方法4和5不是最可靠的.选择前3个中的一个.

Answer 3

使用flexbox/CSS:

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

CSS:

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

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

Answer 4

将该行添加 display: 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
}

Answer 5

我总是使用以下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/

Answer 6

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

  display: flex;
  align-items: center;
  justify-content: center;

.box{
  height: 90px;
  width: 90px;
  background: green;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="box">
  Lorem
</div>

codpen link http://codepen.io/santoshkhalse/pen/xRmZwr

Answer 7

将此css类提供给目标

.centered {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: red; /* Not necessary just to see the result clearly */
}

<div class="centered">This text is centered horizontally and vertically</div>

Answer 8

在父div中添加以下代码

display: grid;
place-items: center;

Answer 9

最佳方法之一是在父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;
}

Answer 10

方法1

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello, World!!
</div>

方法2

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

方法3

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

Answer 11

# Parent
{
  display:table;
}

# Child
{
  display: table-cell;
  width: 100%; // As large as its parent to center the text horizontally
  text-align: center;
  vertical-align: middle; // Vertically align this element on its parent
}

Answer 12

2020年之路

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

Answer 13

<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>

Answer 14

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello, World!!
</div>