Question

我正在尝试使用一个大按钮创建一个页面，该按钮始终位于页面的绝对中间/中心。我希望按钮文本很大，但是当我把它变大时，它会偏移按钮，它不再位于中间。我在这里做错了什么？

（我也安装了bootstrap，很高兴也使用行/列/偏移量）

CSS

.btn-text {
    vertical-align: middle;
    font-family: 'Corben';
    font-size: 580%;
}

.wrapper {
    text-align: center;
}

.btn {
    position: absolute;
    top: 50%;
    padding: 20%;
}

HTML

...
<body>
  <div class="wrapper">
    <div class="btn btn-large btn-primary" id="oujh-button">
      <div class="btn-text">BUTTON</div>
    </div>
  </div>
</body>
...

JSFiddle：https://jsfiddle.net/50ye58oe/1/

Answer 1

如果使用CSS3转换是正常的（如果您不需要支持IE＆lt; 9），您可以这样做：

.btn{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
}

Answer 2

另一种解决方案是使用Bootstrap center-block类将按钮水平居中，并使用flexbox垂直居中。

<强> HTML

  <div class="wrapper">
    <div class="center-block btn btn-large btn-primary" id="oujh-button">
      <div class="btn-text">BUTTON</div>
    </div>
  </div>

<强> CSS

.btn-text {
    font-family: 'Corben';
    font-size: 280%;
}

.wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

使按钮处于绝对居中和页面中间

2 个答案: