我有这样的自举4格与具有行200像素的高度，两列：如何在Bootstrap4列中垂直居中放置此文本？
<div class="row" style="height:200px;background-color:grey">
<div class="col-md-10">
<span>How to center this vertically/horizontally</span>
</div>
<div class="col-md-2">
<span>This too</span>
</div>
</div>
我不知道我怎么能垂直和水平居中两列中的文本。
这里是一个小提琴：http://jsfiddle.net/x1hphsvb/31/
我已经看了看计算器类似的问题/答案，但我找不到，其实在我的情况下工作的答案。
那么如何做到这一点？
使用最新的版本（引导4阿尔法6）也住得一致。
使用align-items-center类进行垂直centter，并text-center到水平中心...
<div class="row text-center align-items-center" style="height:200px;background-color:grey">
<div class="col-md-10">
<span>How to center this vertically/horizontally</span>
</div>
<div class="col-md-2">
<span>This too</span>
</div>
</div>
通过将元素置于两列下方，您可以水平和垂直居中文本。
您需要添加以下三类
d-flex justify-content-center align-items-center
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<div class="row" style="height:200px;background-color:grey">
<div class="col-md-10 d-flex align-items-center justify-content-center">
<span>How to center this vertically/horizontally</span>
</div>
<div class="col-md-2 d-flex align-items-center justify-content-center">
<span>This too</span>
</div>
</div>第一类将使列显示属性成为flex
添加这些作为班到你的跨度text-center a nd align-middle。
的文档，这些类可以在这里看到：
印刷术：https://v4-alpha.getbootstrap.com/utilities/typography/
垂直对齐：https://v4-alpha.getbootstrap.com/utilities/vertical-align/
如果这不起作用，或者，你可以添加周围的跨度的div，给他们上课，并给这些班级提供以下款式：http://jsfiddle.net/x1hphsvb/32/
.col-md-10{
height: 200px;
}
.col-md-2{
height: 200px;
}
.this-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.that-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="height:200px;background-color:grey">
<div class="col-md-10">
<div class="this-div">
<span>How to center this vertically/horizontally</span>
</div>
</div>
<div class="col-md-2">
<div class="that-div">
<span>This too</span>
</div>
</div>
</div>如果OP没有在跨度文本这会工作，或跨度有他们的父母的全部高度。 – Abdel
@Abdel我已经更新了我的答案，这应该允许OP应用样式，允许他们水平和垂直对齐文本。 –
使用position:relative和position:absolute加transform:translate()。
我改变col-md到col-xs，这样就可以看到片段的影响（因为段小）。
我还将height:100%添加到这两列，以便它们取得父级的高度，您可以看到span水平和垂直居中。这将在您调整浏览器
.col-xs-10,
.col-xs-2 {
position: relative;
}
.col-xs-10 span {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
}
.col-xs-2 span {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" style="height:200px;background-color:grey">
<div class="col-xs-10" style="background-color:red;height:100%;">
<span>How to center this vertically/horizontally</span>
</div>
<div class="col-xs-2" style="background-color:blue;height:100%;">
<span>This too</span>
</div>
</div>
看起来像最干净的解决方案。 – brinch