Bootstrap et CSS « ​​transform

Question

Je suis en train de faire un formulaire de contact au centre d'un site Web, mais pour une raison quelconque, Bootstrap et CSS » transform: translate(-50%, -50%); (utilisé pour le positionnement absolu dans le centre d'un site Web) doesn ne jouent pas bien les uns avec les autres. Le problème : Lorsque Bootstrap et la transformation CSS sont appliqués, la ligne supérieure/marge du champ de saisie est supprimée, ce qui rend le champ de saisie buggé. Je peux supprimer soit le lien Bootstrap (ligne HTML 2) ou transformer (ligne CSS 6) et il semblera comme prévu, mais j'ai besoin à la fois Bootstrap (pour la conception sensible) et la transformation (pour le positionnement central).

JS Fiddle (avis HTML: ligne 2 et CSS: ligne 6):

https://jsfiddle.net/t1txvv9d/

L'espoir que quelqu'un sait une solution de contournement pour cela? J'apprécierais vraiment l'aide. Je vous remercie.

Answer 1

Vous êtes mieux avec flex:

body, html { 
    width: 100%; 
    height: 100%; 
} 

.container { 
    width: 100%; 
    height: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

Fiddle here et plus sur CSS Flexbox here.

Answer 2

Je nettoyer un peu le code: Retirez le margin-right: -50%; (n'a pas d'effet), ajouter position: relative-.container et ajouter une hauteur ou au moins un paramètre min-height à .container (selon ce que vous êtes à un px fixe valeur ou un pourcentage, ce qui nécessite alors également une définition de la hauteur pour les éléments parents)

https://jsfiddle.net/b7Lry34n/1/