我有這樣的自舉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