html - 居中的 div 内容导致 div 向上离开屏幕？

Question

我在屏幕中央放置了一个容器，其中包含一些信息。当其中的信息不多时这很好，但是当我在其中放入更多内容时，内容会从屏幕顶部向上推。

我试过在网上四处寻找，但我无法阐明问题，所以我一直在看关于如何居中的指南。

.outer {
  position: relative;
}

.inner {
  background: #000;
  width: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 50px;
  color: #ffffff;
}

<div class="out">
  <div class="inner">
    <h1>HELLO</h1>
    lorem1000
  </div>
</div>

我的意思的例子: https://jsfiddle.net/46s87xt0/

有没有办法轻松解决这个问题？

Answer 1

您可以使用 flex 实现这一点。

justify-content: center; 可用于将元素水平居中对齐。

align-items: center; 可用于将元素垂直居中对齐(如果有空间)。否则该元素的行为类似于静态位置元素。

一个简短内容的例子:

.outter {
  position: relative;
  display: flex;
  min-height: 100vh;
  justify-content: center; /* Align horizontal center */
  align-items: center; /* Align vertical center */
}

.inner {
  background: #000;
  width: 50%;
  padding: 50px;
  color: #ffffff;
}

<div class="outter">
  <div class="inner">
  </div>
</div>

长内容:

.outter{
    position: relative;
    display: flex;
    min-height: 100vh;
    justify-content: center; /* Align horizontal center */
    align-items: center; /* Align vertical center */
}

.inner{
    background: #000;
    width: 50%;
    padding: 50px;
    color: #ffffff;
}

<div class="outter">
        <div class="inner">
            <h1>HELLO</h1>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni assumenda doloribus sit nulla? A velit cum animi, error sunt sapiente totam doloribus voluptatum quaerat consequuntur aspernatur in nihil sequi eligendi!
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perspiciatis tenetur laboriosam quibusdam, accusantium optio in quidem ex illum labore nulla laborum, ratione impedit a placeat reprehenderit culpa, ipsum quisquam excepturi? Voluptatum dolorem ullam sint molestiae odit sit excepturi nam nostrum suscipit libero, placeat voluptatem unde, facilis ipsum sunt ratione error officiis dolorum ducimus ab enim! Esse illum consequatur in quisquam provident reprehenderit voluptates eligendi vitae earum? Obcaecati, tenetur. Incidunt soluta qui dolore voluptate eos non voluptatum doloremque rem accusantium vel excepturi dolorum ipsum sequi, eligendi quis doloribus, debitis maiores error hic reprehenderit? Est molestias quod iusto, cumque, tempora modi ex necessitatibus corrupti provident cum architecto rem quo corporis porro! Quo laudantium accusamus blanditiis aspernatur non, asperiores id optio ducimus fugit aliquid itaque dignissimos ratione quisquam ipsam nihil perferendis similique praesentium corporis officia ipsum amet quidem dolorum quas sequi. Laborum sequi hic animi alias nemo, iusto maxime nesciunt sunt vero soluta voluptatem veritatis obcaecati quos exercitationem optio voluptatum sed, autem deserunt pariatur ducimus magni qui possimus aspernatur tenetur! Quae, similique placeat nisi nam commodi facere neque porro, illum est nulla facilis eius odit rerum nobis quaerat debitis iusto aperiam magni totam ratione mollitia ullam. Expedita qui, dolore aspernatur quidem omnis recusandae natus quia dolores earum culpa similique sapiente perspiciatis ex, alias fugiat numquam corrupti assumenda harum, mollitia est deserunt doloremque? Maiores veniam in, magni ullam odit est iusto corrupti praesentium quam aperiam autem adipisci saepe nihil. Repellendus reiciendis sint adipisci quam tempore sunt maxime tenetur mollitia pariatur veniam quo, beatae maiores velit magni, voluptatem sit odio. Reprehenderit necessitatibus voluptates vero sint eaque magni odio ex ipsam alias nihil, dolores, rerum neque repellat laborum omnis nulla ipsum molestiae exercitationem maiores aut fuga eum nobis optio. Odit nihil tenetur minima ex optio officiis in, esse nostrum ipsam? Aliquam dignissimos tempora dolorem beatae id eos earum autem rerum veniam deleniti magnam tempore laborum modi vero totam rem molestias laboriosam, perferendis a necessitatibus ut. Enim itaque molestiae tenetur mollitia nulla esse minus iusto cum! Molestiae rerum, consequuntur modi necessitatibus quidem quisquam hic fugiat reiciendis provident ad perspiciatis error vero dolor dolores. Ullam qui eveniet rerum suscipit alias voluptas illo, corporis voluptatibus mollitia nemo aut, beatae neque. Reprehenderit tempora perferendis nam assumenda debitis, velit, iusto quod culpa natus aut asperiores iure, voluptatum similique tempore veniam architecto? Harum facere id vero modi placeat nobis doloremque quae alias a! Quo accusamus pariatur, quos hic adipisci quis minima? Dolor illo doloremque velit possimus. Culpa alias itaque dolore iure architecto, corrupti aliquid at illum illo corporis repudiandae. Eveniet cupiditate harum facere, numquam pariatur sed neque. Modi est eaque placeat deleniti rem tempore doloremque at. Ad qui consequuntur quidem voluptatem, aut doloribus sed a exercitationem in ut, labore consequatur est culpa eligendi fugit dolores temporibus saepe, placeat minus corrupti similique! At excepturi itaque ipsa dignissimos nisi quod iusto vel temporibus soluta provident voluptates illo cupiditate, praesentium aperiam hic consequuntur eaque corrupti odio magnam quia? Officia fuga consequatur voluptates eum facere, debitis nostrum voluptate quaerat, ratione esse quos maxime veritatis natus tempora rem, minima tenetur praesentium cum corporis inventore harum delectus dolores. Vel iusto excepturi minus voluptatum ea illum itaque nulla nemo dolorum quo. Explicabo vel minus incidunt tempora molestias consequuntur, in eveniet eum expedita iure sequi quas numquam quisquam temporibus ipsa nesciunt animi obcaecati veritatis! Quis recusandae quidem numquam veritatis voluptates eum sunt temporibus nemo officia molestias dolorem sapiente distinctio, minus nobis. Obcaecati perspiciatis nemo ipsam magni aspernatur, nam rerum optio recusandae ullam? Totam iure, reprehenderit, alias architecto incidunt cupiditate ea velit magnam explicabo minima veritatis ducimus vel dicta, a itaque facere voluptates? Sint earum repudiandae architecto officia itaque rerum. Inventore aspernatur quisquam quam aliquam sunt dolorem nisi suscipit, debitis provident impedit quo voluptas, ducimus repudiandae consectetur unde dolorum deserunt repellendus! Commodi quis doloremque praesentium. Harum ab dignissimos, fugit est doloribus, recusandae sequi nam fugiat, fuga aut officia provident iste quae dolorem eaque tempore non eligendi magnam adipisci necessitatibus sunt? Quasi distinctio corrupti saepe labore incidunt rerum natus, repellat suscipit itaque, impedit eveniet voluptas? Labore voluptatum sunt voluptates doloremque corrupti asperiores enim quis minus, ad, magnam natus iste non ab. Unde beatae nulla nesciunt. Recusandae optio sint perferendis quos, dicta quod sed distinctio! Cupiditate corporis quas earum reprehenderit illo reiciendis consequuntur nulla dolores dicta explicabo voluptate mollitia nemo laborum nihil ut eaque soluta saepe magnam non animi nam tempore recusandae, accusantium corrupti! Repudiandae quia necessitatibus hic minima maxime est excepturi porro aperiam suscipit cumque repellat, soluta qui at. Vero quo, tenetur esse ad minima ipsa aperiam voluptatem assumenda quasi, expedita, nobis nesciunt! Aut harum id voluptates sed iusto saepe eveniet sint aliquam, facere nam fuga in, voluptas aspernatur maiores non nihil, corrupti labore temporibus. Voluptates atque nam qui voluptatibus, dicta voluptate earum maxime molestiae ducimus a culpa expedita vitae fugiat omnis! Ex nihil placeat molestiae deserunt illum similique. Rerum excepturi cupiditate, veniam recusandae minima quia nam illum esse soluta mollitia reiciendis molestias, nihil, sed deleniti autem dolore corrupti corporis numquam similique quibusdam nisi unde? Ullam optio cumque, consectetur quibusdam id dolores magni odit eaque fuga laboriosam! Perferendis dolorem eveniet aliquid officiis iure dolor ratione! Nihil, sunt nobis fugit, cum aperiam, illum dignissimos dolorum architecto vitae nisi voluptate animi labore inventore nostrum rem deserunt sint? Doloribus rem sapiente harum tenetur, in iure dolorem maiores, accusamus nihil suscipit at eligendi sunt eaque exercitationem officiis ab voluptatibus ad esse facere. Nobis voluptas omnis neque ipsa obcaecati ab nostrum velit illum at. Reiciendis dicta possimus, eligendi quibusdam repellendus maiores nihil incidunt alias perferendis dolorem expedita sint earum vero. Optio obcaecati officiis incidunt soluta odit? Voluptate quia a repellat natus velit doloremque distinctio veritatis consequatur commodi. Ex esse libero error modi suscipit incidunt explicabo maxime ipsum. In temporibus accusantium labore magnam omnis maxime nostrum aspernatur culpa vel! Temporibus placeat reiciendis cum alias incidunt? Asperiores rerum deleniti consectetur eveniet autem? Repudiandae repellendus illo cum autem accusamus odit cumque dolores. Autem nesciunt voluptatibus et atque, ipsam est soluta rerum corrupti laboriosam error reprehenderit totam repellendus nulla esse. Qui, magni perferendis minus cumque corporis illo! Suscipit deleniti dolor cumque.
            
        </div>
    </div>