文本对齐：居中和对齐项目：居中不水平工作答案

【问题标题】：Text-align: center and align-items: center not working horizontally文本对齐：居中和对齐项目：居中不水平工作
【发布时间】：2017-05-17 06:16:13
【问题描述】：

我以前从未遇到过这种情况。我在各种地方都试过text-align: center，但它们都不起作用。他们垂直工作，但他们不水平工作。我试图让它在每个盒子的水平和垂直方向上都工作。

这是我的代码：

.boxes {
  height:100%;
}
.box {
  width: 33%;
  height: 20%;
  display: -webkit-flex;
}
.box p {
  display: flex;
  align-items: center;
}
.box1 {
  background: magenta; 
}
.box2 {
  background: cyan;
}
.box3 {
  background: yellow;
}
.box4 {
  background: orange;
}
.box5 {
  background: purple;
}
* { 
  margin:0;
  padding:0;
}
html, body {
  height: 100%; 
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="tabletest.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="boxes">
      <div class="box box1"><p>Box 1</p></div>
      <div class="box box2"><p>Box 2</p></div>
      <div class="box box3"><p>Box 3</p></div>
      <div class="box box4"><p>Box 4</p></div>
      <div class="box box5"><p>Box 5</p></div>
    </div>
  </body>
</html>

我也试图坚持百分比来进行响应式设计。

编辑：这似乎与另一篇帖子重复，但我的问题是如何让文本直接在中心对齐（垂直和水平），同时保持框的顺序。

【问题讨论】：

所以您需要颜色以在页面中心填充文本？
Leo the lion，关于可能的重复，该帖子询问如何垂直排列块，但我的问题是如何让文本在框的中心对齐我通常的解决方案不起作用。我看不出它有什么相似之处。
Deepak，颜色不一定要填满页面，但我确实希望文本位于框的中心。

标签： html css responsive-design flexbox

【解决方案1】：

您可以使用 flexbox 使用此解决方案。

发生了什么变化？

将flex-direction: column 添加到.boxes 以定义弹性项目（<p> 元素）如何放置在弹性容器（.boxes）中。
添加了align-items: center 以使弹性项目沿水平轴居中。
添加了justify-content: center 以使弹性项目（<p> 元素）在垂直轴上居中。

* { 
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%; 
}

.boxes {
  height: 100%;
}
.box {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 20%;
  justify-content: center;
  width: 33%;
}
.box1 {
  background: magenta; 
}
.box2 { 
  background: cyan;
}
.box3 {
  background: yellow;
}
.box4 {
  background: orange;
}
.box5 { 
  background: purple;
}

<div class="boxes">
  <div class="box box1"><p>Box 1</p></div>
  <div class="box box2"><p>Box 2</p></div>
  <div class="box box3"><p>Box 3</p></div>
  <div class="box box4"><p>Box 4</p></div>
  <div class="box box5"><p>Box 5</p></div>
</div>

【讨论】：

如果您解释了为什么提供的代码解决了 OP 的问题，将会很有帮助。

【解决方案2】：

只需添加

justify-content: center;

到您的box 班级。

这就是你需要做的。见here。

【讨论】：

【解决方案3】：

使用这个：

 .box p {
    align-items: center;
    display: block;
    text-align: center;
    width: 100%;
}

【讨论】：

【解决方案4】：

尝试以下选项

.boxes {
height:100%;
}
.box {
  width: 33%;
  height: 20%;
}
.box p {
  text-align: center;
}
.box1 {
  background: magenta; 
}
.box2 {
  background: cyan;
}
.box3 {
  background: yellow;
}
.box4 {
  background: orange;
}
.box5 {
  background: purple;
}
* { 
  margin:0;
  padding:0;
}
html, body {
  height: 100%; 
}

注意：我使用了 text-align insted 的 align-items

【讨论】：

谢谢，但我正在寻找垂直和水平居中对齐，而 text-align 只给我水平居中对齐。不过，我确实找到了答案。

【解决方案5】：

你也可以使用这个：

.box p {
    width: 100%;
    display: flex;
    align-items: center;
    text-align: center
}

【讨论】：

【解决方案6】：

试试这个。

.boxes {
  height:100%;
}
.box {
  width: 33%;
  height: 20%;
  display: -webkit-flex;
  position: relative;
}
.box p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.box1 {
  background: magenta; 
}
.box2 {
  background: cyan;
}
.box3 {
  background: yellow;
}
.box4 {
  background: orange;
}
.box5 {
  background: purple;
}
* { 
  margin:0;
  padding:0;
}
html, body {
  height: 100%; 
}

【讨论】：

谢谢，但它似乎不起作用。这显示：imgur.com/a/cBKlc。不过，我确实找到了问题的答案。