DIV上的文本垂直对齐答案

【问题标题】：Text Vertical Alignment on DIVDIV上的文本垂直对齐
【发布时间】：2017-07-14 19:31:36
【问题描述】：

我需要在所有屏幕分辨率的垂直中间对齐文本内的文本。

谁能推荐一下？

【问题讨论】：

分享代码...
[链接] jsfiddle.net/gkc2xg11
目前我使用了 padding 和 min-height 属性。但是每个分辨率的对齐方式不同
我已经编辑了我的答案，请检查一下......
给你：jsfiddle.net/kr9cjc3L/2 我也冒昧地清理了你的代码 :)

【解决方案1】：

试试下面的代码

.textBox{display: flex;align-items: center;justify-content: center;}
.cont-bx1{background-color:#9f2f1f; color:#ffffff; text-align:center;  min-height:200px; font-weight:bold; border: 1px solid #ffffff;}
.cont-bx2{background-color:#ef9030; color:#ffffff; text-align:center; min-height:200px; font-weight:bold; border: 1px solid #ffffff;}
.cont-bx3{background-color:#df6221; color:#ffffff; text-align:center; min-height:200px; font-weight:bold; border: 1px solid #ffffff;}
.cont-bx4{background-color:#df6221;  color:#ffffff; text-aligncenter;  min-height:200px; font-weight:bold; border: 1px solid #ffffff; }
.cont-bx5{background-color:#9f2f1f; color:#ffffff; text-align:center; min-height:200px; font-weight:bold; border: 1px solid #ffffff;}
.cont-bx6{background-color:#9f2f1f; color:#ffffff; text-align:center; min-height:200px; font-weight:bold; border: 1px solid #ffffff;}
.cont-bx7{background-color:#ef9030; color:#ffffff; text-align:center; min-height:200px; font-weight:bold; border: 1px solid #ffffff;}
.cont-bx8{background-color:#df6221; color:#ffffff; text-align:center; min-height:200px; font-weight:bold; border: 1px solid #ffffff;}

<div class="col-lg-12">
<div class="col-lg-4 cont-bx1 textBox">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="col-lg-4 cont-bx2 textBox">Lorem ipsum dolor sit amet, consectetur</div>
<div class="col-lg-4 cont-bx3 textBox">Lorem ipsum dolor sit amet, consectetur adipiscing</div>
</div>
<div class="col-lg-12">
<div class="col-lg-6 cont-bx4 textBox">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="col-lg-6 cont-bx5 textBox">Lorem ipsum dolor sit amet, consectetur adipiscing</div>
</div>
<div class="col-lg-12">
<div class="col-lg-4 cont-bx6 textBox">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="col-lg-4 cont-bx7 textBox">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
<div class="col-lg-4 cont-bx8 textBox">Lorem ipsum dolor sit amet</div>
</div>

【讨论】：

【解决方案2】：

您可以使用 flexbox 对齐项目。

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

此处为完整示例：codepen

【讨论】：