中心响应式定位

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 in fiddle).

2.) 要在 .buttons 内居中 .button-pos，请使用

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

这是 fiddle：https://jsfiddle.net/Luo1k7Lt/1/

Answer 2

试试这个：

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

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

Answer 3

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

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

.buttons{
    margin-top: 40px;
}

如果有人有更好的解决方案，请写在这里:)

中心响应式定位

Responsive positioning in center

html

css

responsive

full-width