Использование гибкости - центрировать по вертикали, если содержимое не выше контейнера

Вот прямоугольник в центре области просмотра. Пока коробка меньше высоты контейнера, она отображается в центре по вертикали. Когда поле выше, его верх скрыт, и его нельзя прокрутить.

    <!DOCTYPE html>
    <html style = "height: 100%; ">
    <body style = "height: 100%; ">
        <div style = "display: flex;  justify-content: center; height: 100%;   ">
            <div style = "align-self: center;  ">
                <div style = "width:10vw; border: 3px solid blue; margin:10px; background-color:fuchsia;">abc</div>
            </div>
        </div>
    </body>
    </html>

Теперь измените текст div на длинный:

<!DOCTYPE html>
<html style = "height: 100%; ">
<body style = "height: 100%; ">
    <div style = "display: flex;  justify-content: center; height: 100%;   ">
        <div style = "align-self: center;  ">
            <div style = "width:10vw; border: 3px solid blue; margin:10px; background-color:fuchsia;">abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc</div>
        </div>
    </div>
</body>
</html>

и верхняя часть окна не видна и не прокручена.

Как мне заставить его показать верхнюю часть коробки и позволить мне прокрутить до остального, если он выше, чем его контейнер, и все же центрировать его по вертикали, если он короче? Метод НЕ должен предполагать известную высоту содержимого. Возможно, содержание неизвестного текста.

html css flexbox

29.11.2018 20:33

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

107

Ответы 1

Как насчет overflow-y: auto;?

<!DOCTYPE html>
<html style = "height: 100%; ">
<body style = "height: 100%; ">
    <div style = "display: flex;  justify-content: center; height: 100%; overflow-y: auto;">
        <div style = "align-self: center;  ">
            <div style = "width:10vw; border: 3px solid blue; margin:10px; background-color:fuchsia;">abc</div>
        </div>
    </div>
</body>
</html>

29.11.2018 20:36

Другие вопросы по теме

Css для всех устройств или css для отдельных устройств

Выравнивание в линию

Отрегулируйте положение боковой панели таким образом, чтобы она располагалась "впереди" фиксированной верхней панели NavBar

Как повторить изображение в теге img (не фоновое изображение CSS)

Javascript и css не загружаются на новой странице Vue JS

Могу ли я поместить CSS, HTML И JAVASCRIPT в один файл с помощью редактора кода, такого как Sublime Text или Atom.io? Спасибо

Создание небольшой страницы с изображением с 3-мя кнопками

Как добавить задержку между повторением бесконечной анимации с помощью переопределения CSS

Как стилизовать тип ввода "время"

Проблема форматирования текста при загрузке

Использование гибкости - центрировать по вертикали, если содержимое не выше контейнера

Ответы 1

Другие вопросы по теме

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