Вопросы Теги

ReactJS - CSS Flexbox: я установил flexbox для выравнивания своих элементов, но моя страница не может быть расположена вертикально по центру

Элементы HTML в большинстве браузеров будут иметь: - 

offsetLeft
offsetTop

Они определяют положение элемента относительно его ближайшего родителя с макетом. Этот родительский элемент часто можно получить с помощью свойства offsetParent.

IE и FF3 имеют 

clientLeft
clientTop

Эти свойства менее распространены, они определяют позицию элементов с клиентской областью его родителей (дополненные область является частью клиентской области, но граница и маржа не являются).

0
задан Webwoman 23 February 2019 в 08:56
поделиться

1 ответ

.page{ 
    width: 100vw;
    height: 100%;
    min-height: 100vh; 
    background: rgb(219, 101, 255); 

    /*add following to center align content vertically */ 
    display:flex;
    align-items: center;/*vertically align page_container*/
    justify-content:center/*horizontally align page_container*/
}

.page_container{
      padding: 5vh 3vw;

      /* add following to center align content of page_container horizontally*/
      text-align:center
}

Добавьте вышеуказанные правила в файл styles.modules.css.

Ссылка Codesandbox: https://codesandbox.io/s/olrvozl2z5?codemirror=1&fontsize=14

0
ответ дан Srijan 23 February 2019 в 08:56
поделиться
Другие вопросы по тегам:

Похожие вопросы: