Question

我试图将引导板垂直和水平居中。该该文件的结构如下：

<body>
  <div class="container parent">
    <div class="row">
      <div class="col-md-4 col-md-offset-4">
        <div class="panel panel-default">
          <div class="panel-body text-center">A Basic Panel</div>
        </div>
      </div>
    </div>
  </div>
</body>

CSS：

.parent {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

JSFiddle

这似乎使面板水平居中，但不是垂直居中。任何帮助表示赞赏！

Answer 1

你不能将col-md-3居中，因为总共有12列，后面有9列，你不能均匀分割。如果您使用的是偶数列，则可以使用col-md-offset - ＃。

Answer 2

您可以使用.parent { top: 50% }

垂直居中

%值可以根据您希望的显示位置进行更改。

此值还取决于元素所在的div大小的百分比。

Answer 3

我做了两处改动：

HTML

<div class="col-xs-12 col-md-4 col-md-offset-4">

Css（应在bootstrap css样式表之后声明）：

.panel{
    margin-top: -25px;
}
.parent {
    height: 100vh;
    padding-top: 50vh;
}

为什么margin-top：-25px？因为在开发人员控制台中，我看到.panel css框模型的高度为50px，从50 vh高度开始（所以它不会居中并且会低于额外的{{1}因此我从.panel中减去了额外的高度，使其正确居中。

垂直和水平对齐行中心引导板

3 个答案: