Question

我想将此文本垂直和水平居中放在容器中，它位于一行和一列设置为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;
 }

Answer 1

您可以使用此代码：

查看代码段会导致展开模式

＆＃13;

.home {
	height: 150px;
	background-color:red;
	position:relative;
}

 #text {
	 position:absolute;
	 top:50%;
	 text-align:center;
    text-align:center;
 }

＆＃13;

<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>

＆＃13;

Answer 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进行垂直或水平对齐。

如何垂直居中Boostrap柱

2 个答案: