Html 如何使用引导垂直和水平对齐列中的标题

使用引导： 我有两排。第一行有一列。第二行有两列。每列有一个标题。每列中的标题在列顶部对齐，在每列中水平对齐，但我希望每个标题在每列中垂直居中，水平居中。我该怎么做

    <div class="row first_row">
        <div class="col-xs-12">
            <h1>header1</h1>
        </div>
    </div>

    <div class="row second_row">
        <div class="col-xs-6">
            <h2>header2</h2>
        <div class="col-xs-6">
            <h2>header3</h2>
        </div>
    </div>

.col-xs-12 {
height: 300px;
font-size: 100px;
text-align: center;
border: 2px solid black;
}
 h1 {
font-family: 'Seymour One', sans-serif;
font-size: 100px;
color: green;
}
.col-xs-6 {
height: 100px;
background-color: blue;
border: 2px solid black;
text-align: center;
}
 h2 {
font-family: 'Seymour One', sans-serif;
font-size: 100px;
color: blue;
}

校长1
校长2
校长3
.col-xs-12{
高度：300px；
字体大小：100px；
文本对齐：居中；
边框：2件纯黑；
}
h1{
字体系列：“西摩一号”，无衬线；
字体大小：100px；
颜色：绿色；
}
.col-xs-6{
高度：100px；
背景颜色：蓝色；
边框：2件纯黑；
文本对齐：居中；
}
氢{
字体系列：“西摩一号”，无衬线；
字体大小：100px；
颜色：蓝色；
}

在bootstap的网格类中添加内容是个坏主意，最好添加自己的。我把你的元素包在一个中心框里，用它来对齐标题。如果将父包装器位置设置为相对位置，子包装器位置设置为绝对位置，则可以使用top 50%使其向下移动一半。然而，你必须考虑到你正在移动的元素的高度并进行调整。在本例中，标题为字体大小100，边距为0，行距为100。因此，我们使用余量上限：-50px将其恢复到50px

以下是一个工作示例：

HTML:

---

哦，有一个问题：我添加了一列，现在列之间有了空间（中间的列在左右两侧都有空间），而且，我如何分别更改每个列的颜色？当我应用边框时，中心框似乎比列窄（它与列不完全匹配）.你能提供一个JSFIDLE来显示你在说什么吗？我意识到没有必要制作一个定心盒。我可以用类名和标题标记每一列，如：header，并在css中引用类名和标题，如：.a_classname{height:100px；background color:green；}h1{position:absolute；top:50%；text align:center；line height:100px；}谢谢

<div class="container">
    <div class="row first_row">
        <div class="col-xs-12">
            <div class="centering-box">
                <h1>header1</h1>
            </div>
        </div>
    </div>

    <div class="row second_row">
        <div class="col-xs-6">
            <div class="centering-box">
                <h2>header2</h2>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="centering-box">
                <h2>header3</h2>
            </div>
        </div>
    </div>
</div>

.centering-box{
    position: relative;
    border: 2px solid black;
    text-align: center;
    font-size: 100px;
    display:block;
    width: 100%;
}
.first_row .centering-box{
    height: 300px;
}
.second_row .centering-box {
    height: 200px;
    background-color: blue;
}
h1,h2{
    font-family: 'Seymour One', sans-serif;
    font-size: 100px;
    position: absolute;
    top: 50%;
    width: 100%;
    margin: 0;
    margin-top: -50px;
    line-height: 100px;
}
h1 {
    color: green;
}
h2 {
    color: black;
}