Bootstrap div-对齐到页面中心

Question

我尝试使用Twitter Bootstrap 3将col 6 div放在页面中心。不幸的是，我所做的一切都不起作用。我使用Firefox开发人员工具来辨别这个问题，这个问题最有可能是因为col-span-6类是向左浮动的。因此，我向style=-span-6元素添加了一个浮点“float: none !important;”，但这没有任何作用。

救命！！

<div class="panel-group col-sm-6" style="float: none;">
<div class="panel panel-default">
    <div class="panel-heading">
        <h5 class="card-title">test</h5>
    </div>
    <div class="panel-body">
        <p class="card-text">test</p>
    </div>
</div>
</div>

Answer 1

我不确定，但在我看来，你想实现这个效果：

​

.super-center {
  margin: 0 auto !important;
  float: none !important;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="super-center panel-group col-sm-6">
<div class="panel panel-default">
    <div class="panel-heading">
        <h5 class="card-title">test</h5>
    </div>
    <div class="panel-body">
        <p class="card-text">test</p>
    </div>
</div>
</div>

​

添加到div中就足够了：margin: 0 auto;

Answer 2

您可以使用CSS将div与页面中心对齐。下面的CSS对我很有效。您可以尝试使用此CSS。

​

.col-sm-6 {
          position: absolute;
	  margin: auto;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  width: 100px;
	  height: 100px;
	  background-color: #ccc;
	  border-radius: 3px; 
	  text-align: center;
}

<div class="panel-group col-sm-6">
   <div class="panel panel-default">
	 <div class="panel-heading">
            <h5 class="card-title">test</h5>
         </div>
         <div class="panel-body">
            <p class="card-text">test</p>
         </div>
   </div>
</div>

​

Answer 3

为此，您可以使用display: flex以一种更容易的方式处理对齐。我已经完成了下面的示例代码。希望能对你有所帮助

HTML

<div class="panel-group col-sm-6">
<div class="panel panel-default d-flex h-100">
    <div class="panel-heading">
        <h5 class="card-title">test</h5>
    </div>
    <div class="panel-body">
        <p class="card-text">test</p>
    </div>
</div>
</div>

CSS

.d-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.h-100 {
  height: 100vh !important;
}

JS文件链接：https://jsfiddle.net/SJ