在中心响应定位

Question

我有一个带有一些内容的全宽背景图片。 最后，我想将我的按钮放在中心（垂直和水平），但使用position:absolute，这不起作用。您可以在JSFiddle中看到它。

我的CSS中有一些代码行

.buttons{
    position:relative;
}

.buttons .button-pos{
  width:100%;
  position:absolute;
  margin:auto;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

并没有我想要的方案。

Answer 1

1。）你的.buttons div没有高度，所以首先需要为它定义一个高度，否则没有垂直居中的可能性（我在小提琴中做了200px）。

2.。要将.button-pos置于.buttons之内，请使用

.button-pos {
  width: 100%;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}

这里是小提琴：https://jsfiddle.net/Luo1k7Lt/1/

Answer 2

我自己做了一些解决方案，现在效果非常好，我决定将所有内容集中在标题中。屏幕尺寸只有一些小变化，效果很好:)

#welcome-header .welcome-content{
    width: 80%;
    height: 400px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.buttons{
    margin-top: 40px;
}

如果有人得到了更好的解决方案，请在那里写下来：）

Answer 3

试试这个：

.buttons .button-pos { display: inline-block; zoom: 1; }

一个简单的IE hack就是在CSS规则中添加display*: inline;