Центр Div в центре экрана

Question

Я знаю, что это было задано довольно много раз здесь и в Интернете, но у меня с этим трудятся.

У меня есть один контейнер div в документе HTML. Просто тело с фоном и диваном.

Я делаю страницу «скоро». Я хочу центрировать контейнер div в центре экрана, чтобы он работал на мобильном, рабочем столе и любом разрешении.

Я пробую разные макеты кода, но я не могу просто понять это правильно.

Как я могу это сделать?

Ссылка на мой код: https://jsbin.com/puyege/edit?html,output

@import url(http://fonts.googleapis.com/earlyaccess/alefhebrew.css); 
 

 
body { 
 
    margin: 0 !important; 
 
    background: url("http://lbscience.org/wp-content/uploads/2016/01/Horsehead-Nebula.jpg"); 
 
    background-size: cover; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
} 
 

 
#container { 
 
    background-color: green !important; 
 
    font-family: 'Alef Hebrew', sans-serif; 
 
    position: fixed; 
 
    top: 50%; 
 
    -webkit-transform: translate(0, -50%); 
 
    -ms-transform: translate(0, -50%); 
 
    transform: translate(0, -50%); 
 
    text-align: center; 
 
} 
 

 
.bold { 
 
    font-weight: bold; 
 
} 
 

 
#quote { 
 
    font-size: 2em; 
 
}

<div id="container"> 
 
    <p class="bold">"אי-שם, משהו מחכה להתגלות" 
 
    <p> 
 
     <p>קארל סייגן-</p> 
 
     <img alt="logo" id="logo" src="http://lbscience.org/wp-content/uploads/2015/10/LittleBig-Science-Old-Logo-300x90.png" /> 
 
     <p>בקרוב</p> 
 
</div>

Answer 1

Вы должны установить left: 50% на #container, а затем скорректировать transform с учетом этого. Вы также правильно, не закрывая <p class="bold">:

@import url(http://fonts.googleapis.com/earlyaccess/alefhebrew.css); 
 
body { 
 
    margin: 0 !important; 
 
    background: url("http://lbscience.org/wp-content/uploads/2016/01/Horsehead-Nebula.jpg"); 
 
    background-size: cover; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
} 
 
#container { 
 
    background-color: green !important; 
 
    font-family: 'Alef Hebrew', sans-serif; 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    text-align: center; 
 
} 
 
.bold { 
 
    font-weight: bold; 
 
} 
 
#quote { 
 
    font-size: 2em; 
 
}

<div id="container"> 
 
    <p class="bold">"אי-שם, משהו מחכה להתגלות"</p> 
 
    <p>קארל סייגן-</p> 
 
    <img alt="logo" id="logo" src="http://lbscience.org/wp-content/uploads/2015/10/LittleBig-Science-Old-Logo-300x90.png" /> 
 
    <p>בקרוב</p> 
 
</div>