Responsive Positionierung in der Mitte

Question

Ich habe eine volle Breite Hintergrundbild mit etwas Inhalt. Am Ende möchte ich meine Tasten in der Mitte (vertikal und horizontal) positionieren, aber mit position:absolute, das funktioniert nicht. Sie können es in JSFiddle sehen.

gibt es einige Codezeilen von meinem CSS

.buttons{ 
    position:relative; 
} 

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

Und es gibt wenig Schema das, was ich will.

Answer 1

Ich mache eine Lösung von mir selbst und es funktioniert jetzt sehr gut, ich beschloss, alle meine Inhalte zu zentrieren, was im Header war. Nur ein paar kleine Änderungen mit Bildschirmgrößen und es funktioniert gut :)

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

.buttons{ 
    margin-top: 40px; 
} 

Wenn jemand etwas bessere Lösung erhalten, schreiben Sie es dort :)

Answer 2

1.) Ihre .buttons div nicht eine Höhe hat, so müssen Sie zunächst für eine Höhe definieren, sonst gibt es keine vertikal zentriert Möglichkeit (I machte es 200px in der Geige).

2.) .button-pos innerhalb .buttons zu zentrieren, verwenden

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

Hier ist die Geige: https://jsfiddle.net/Luo1k7Lt/1/

Answer 3

Try this:

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

Eine einfache IE-Hack ist display*: inline; hinzufügen in dieser CSS-Regel