如何垂直居中引导列答案

【问题标题】：How to Vertically center a Boostrap Column如何垂直居中引导列
【发布时间】：2016-12-13 00:31:48
【问题描述】：

我想在容器内垂直和水平居中此文本，它位于设置为 12 的一行和一列内。但我只能让它水平居中而不是垂直居中。我尝试了 Flex，但它会将页面中的所有对象移动到中心，我只希望这个对象居中。

HTML：

 <div class="container-fluid home">

   <div class="row">
      <div class="col-md-12" id="text">
        <p>Hello World!</p>
      </div>

   </div>

CSS：

.home {
  height: 100%;
  background-image: url(images/home.png);
}

 #text {

   text-align:center;
 }

【问题讨论】：

vertical-align with Bootstrap 3的可能重复
vertical align middle content with bootstrap 3的可能重复

标签： html css twitter-bootstrap

【解决方案1】：

您可以使用此代码：

展开模式查看代码sn -p结果

.home {
	height: 150px;
	background-color:red;
	position:relative;
}

 #text {
	 position:absolute;
	 top:50%;
	 text-align:center;
    text-align:center;
 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container-fluid home">

     <div class="row">
        <div class="col-md-12" id="text">
          <p>Hello World!</p>
        </div>

     </div>

【讨论】：

【解决方案2】：

您可以使用 css 的 transform 属性简单地做到这一点。但是您必须确保您的主容器具有定义的高度，例如：

.home{height: 1000px;
}

或其他任何东西，但在这种情况下 100% 高度将不起作用，因为它的父元素没有定义高度。之后，我们将像这样包含 css 转换属性：

这是给你的家庭课的：

.home {
  height: 1000px;
  background: #ccc;
  float: left;
  width: 100%;
}

你必须像这样改变你的 html 结构：

<div class="container-fluid home">
      <div class="col-md-12" id="text">
        <p>Hello World!</p>
      </div>
 </div>

之后，我们将为我们的 div 定义一些 css 属性，我们要使其垂直和水平居中。

#text{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

现在您可以轻松地使您的 div 垂直或水平对齐父 div。

【讨论】：