Question

<style>
._1{
  height:20%;
  width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
</style>
<div class="_1">content</div>

如何在div的中间对齐内容？谢谢。 demo

编辑：高度是％而不是px。我设置了line-height: 20%，但这不起作用。

Answer 1

   div{ 
    height: 20%;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-content: center;    
  }

Answer 2

另一种选择：使用一个垂直居中的内部元素。

要做到这一点：

将._1设为position: relative;
将文本包装在centerPosition类中，并使用下面该类的CSS。

＆＃13;

._1 {
  position: relative;
  height: 20%;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  
  /* Just to make this example visible */
  border: 2px solid #555;
}

.centerPosition {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Not needed, just making the page bigger */
.examplePage {
  height: 300px;
}

＆＃13;

<div class="examplePage">
  <div class="_1">
    <div class="centerPosition">content</div>
  </div>
</div>

＆＃13;

Answer 3

如果您不想使用flexbox，可以尝试使用CSS3翻译。但为了实现这一点，您需要将文本包装在段落或其他标记中：

._1 p{
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); 
    position: relative;
  top: 50%;
}
<div class="_1"><p>content</p></div>

使用该标记，您也可以使用和表格单元格对齐技术。

Answer 4

仅限Flex-box解决方案。 Here browser support

._1{
  height:20%;
  width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  
  display: flex;
  align-items: center;
  
  border: 1px dashed deepskyblue;
}

html,body {
	height: 100%;
}

<div class="_1">content</div>

div中间的CSS文本（div高度：20％）

4 个答案: