Как сделать окно регистрации по центру?

Question

Как сделать окно регистрации по центру?

Александр Новиков Ученик (21), закрыт 2 года назад

 Код HTML:

  
 
     
         
        Регистрация 
         
         
     
 
     
         
             
                Регистрация профиля
 
                Заполните форму для создания аккаунта
 
                
 
                 
                Электронная почта:  
                 
 
                Пароль:

Код CSS:

 * {box-sizing: border-box;} 
 
.container { 
    padding: 16px; 
  } 
 
input[type = text], input[type = password] { 
    width: 100%; 
    padding: 15px; 
    margin: 5px 0 22px 0; 
    display: inline-block; 
    border: none; 
    background: #f1f1f1; 
} 
 
input[type=text]:focus, input[type=password]:focus { 
    background-color: #ddd; 
    outline: none; 
  } 
 
hr { 
    border: 1px solid #f1f1f1; 
} 
 
div { 
    background-color: beige; 
    width: 600px; 
     
} 
 
.registbtn { 
    background-color: #4CAF50; 
    color: #ddd; 
    padding: 16px 20px; 
    margin: 8px 0; 
    border: none; 
    cursor: pointer; 
    width: 100%; 
    opacity: 0.9; 
}

Так же на фоне воспроизводится анимации. Надо, чтобы она не была чем-либо закрыта

Answer 1

могут быть разные варианты, можно использовать flex, например...
если только по горизонтали по центру, то для div.container можно добавить стиль
margin: 0 auto;

Answer 2

Большой вопрос Мудрец (17014) 2 года назад

Учи язык, мамкин программист

Answer 3

Контейнеру в котором находится блок регистрации, прописываешь максимальную ширину max-width и прописываешь margin: 0 auto; вот тебе и центровка.

Answer 4

 body {
   display: flex;
   justify-content: center;
}

По вертикали нужно позиционировать отдельно. Хотя если на странице одна лишь форма и нет других элементов, то можно дополнить свойством align-content: center.

Answer 5

Саня Семенов Оракул (60585) 2 года назад

https://codepen.io/norbert123/pen/LYBjEvV
вот так