如何解决在所有屏幕上居中放置一个大 Div 但允许滚动?
我想弄清楚如何制作一个以所有屏幕为中心的大 div,但也可以在较小的屏幕上滚动,否则无法看到所有 div。
例如,假设 div 的大小为 1200px x 600px。使用以下内容将使 div 居中,但不允许在较小的屏幕尺寸上滚动:
position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;
我的目标是找到一种方法,让这些较小的计算机屏幕能够看到整个大 div(通过滚动),但仍然让 div 以各种尺寸的屏幕为中心。
这可能吗?另外,有没有非javascript的解决方案?
解决方法
希望它能解决您的问题。
.main-wrapper {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
height: auto;
padding: 20px;
background: red;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Hello,world!</title>
</head>
<body>
<div class="main-wrapper">
<div class="internal-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae,perspiciatis. Assumenda cupiditate culpa obcaecati molestias architecto facilis! Ratione laboriosam reprehenderit asperiores et ipsum est,quisquam modi beatae odio enim nostrum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet libero nam nulla assumenda optio iure adipisci,exercitationem deserunt a. Similique illum cumque eveniet quam enim in provident expedita culpa officia! Lorem ipsum dolor sit amet consectetur adipisicing,elit. Cupiditate ipsam et,nostrum. Dolorum autem qui voluptas doloribus voluptatibus est laboriosam perferendis blanditiis et quaerat iusto,vitae unde itaque dolore nulla.. Lorem ipsum dolor sit amet consectetur,adipisicing elit. Rem recusandae,repellat velit rerum. Repellendus harum,sequi architecto deleniti tenetur cumque,ducimus itaque,nam officia vero minima quos,debitis quis sunt. Lorem ipsum dolor sit,amet consectetur,adipisicing elit. Architecto,quaerat,illum. Aperiam,repellendus sit atque architecto cupiditate. Quis consequuntur,iure nihil doloremque,aut distinctio quibusdam rem,mollitia incidunt,voluptate quasi?
</div>
</div>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。