如何在 div 中间对齐段落？答案

【问题标题】：How to align a paragraph in the middle of the div?如何在 div 中间对齐段落？
【发布时间】：2019-08-25 13:59:22
【问题描述】：

使用几个 Angular 容器，我想在单元格的中间对齐文本。不幸的是，垂直对齐不起作用。

代码如下：

main {
  height: 100%;
  text-align: center;
  padding-top: 6%;
  padding-left: 7%;
  padding-right: 7%;
  font-size: 1em;
}

.vertical-align {
  height: 100%;
}

p {
  position: relative;
  vertical-align: middle;
}

<main>
  <div class="vertical-align">
    <p>{{ data.text}}</p>
  </div>
</main>

你知道我该如何解决这个问题吗？

谢谢！

【问题讨论】：

标签： html css angular alignment boilerplate

【解决方案1】：

w3schools 上有一个简单示例，说明如何使用位置和变换进行垂直和水平居中。

这是一个工作示例。

.center { 
  height: 100vh; /* 100vh is used for fullscreen, set your div height here instead. */
  position: relative;
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<main>
  <div class="center">
    <p>test</p>
  </div>
</main>

【讨论】：

【解决方案2】：

垂直对齐不适用于块元素。 p标签是块元素

为了垂直居中，您需要使用 flexbox

.vertical-align {
  height: 100%;
  display:flex;
  align-items:center;
}

请参考下面的示例，也不是为了示例，我将主容器的高度从 100% 更改为 100vh

main {
  height: 100vh;/*for example purpose*/
  text-align: center;
  padding-top: 6%;
  padding-left: 7%;
  padding-right: 7%;
  font-size: 1em;
}

.vertical-align {
  height: 100%;
  display:flex;
  align-items:center;
  border:1px solid red;/*for example purpose*/
}

p {
  position: relative;
  /*vertical-align: middle;*/
}

<main>
  <div class="vertical-align">
    <p>lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem </p>
  </div>
</main>

【讨论】：

【解决方案3】：

使用 text-align center 使段落居中

.center p
{
     text-align: center;
}

【讨论】：

【解决方案4】：

请参考基本的html css参考

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

<!DOCTYPE html>
<html>

<body>
<div class="flex-container">
  <p>Content in center</p>
</div>

</body>
</html>

https://codepen.io/samuveljohns/pen/JjPWEVz

【讨论】：