响应式中心定位

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.) 要在.buttons 中居中.button-pos，请使用

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