我想将一个元素置于父元素的中心。使用变换、 flex 盒、网格等就足够简单了...... 问题是溢出行为。 当父级缩小到子级以下时，会出现滚动条。但他们不允许我滚动到 child 的左上角。这就是我的意思: gif animation showing window-resizing and the css behavior
这个例子使用flexbox来居中，html如下:
b {
color: white;
}
html {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
margin: 0;
}
header {
position: absolute;
top: 0;
height: 84px;
width: 100%;
background-color: darkolivegreen;
}
footer {
position: absolute;
bottom: 0;
height: 56px;
width: 100%;
background-color: darkslateblue;
}
main {
position: absolute;
top: 84px;
bottom: 56px;
width: 100%;
background-color: #222222;
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
}
div.content {
flex-shrink: 0;
width: 600px;
height: 600px;
background-color: darkred;
}<!DOCTYPE html>
<html lang="en">
<!-- omitted head -->
<body>
<header>
</header>
<main>
<div class="content">
<b>Lorem</b> Lots of Lorem ipsum... <b>quod</b>
</div>
</main>
<footer>
</footer>
</body>
</html>我想要实现的目标看起来更像是这样的: gif animation showing window-resizing and the css behavior
在这个例子中我没有使用flexbox-centering。我将内容包装在一个容器中，该容器的边距设置为:0 auto。这将在 x 轴上实现所需的行为，但在 y 轴上则不然。我怎样才能在两个轴上实现这一目标？
下面是使用容器和自动边距居中的第二个示例的 html 和 css:
b {
color: white;
}
html {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
margin: 0;
}
header {
position: absolute;
top: 0;
height: 84px;
width: 100%;
background-color: darkolivegreen;
}
footer {
position: absolute;
bottom: 0;
height: 56px;
width: 100%;
background-color: darkslateblue;
}
main {
position: absolute;
top: 84px;
bottom: 56px;
width: 100%;
background-color: #222222;
/* display: flex;
justify-content: center;
align-items: center; */
overflow: auto;
}
div.container {
margin: 0 auto;
width: 600px;
height: 100%;
background-color: #333333;
}
div.content {
/* flex-shrink: 0; */
width: 600px;
height: 600px;
background-color: darkred;
}<!DOCTYPE html>
<html lang="en">
<!-- omitted head -->
<body>
<header>
</header>
<main>
<div class="container">
<div class="content">
<b>Lorem</b> Lots of Lorem ipsum... <b>quod</b>
</div>
</div>
</main>
<footer>
</footer>
</body>
</html>啊...我希望找到一个不使用 javascript 来实现此行为的解决方案。如果我找到解决方案，我会将其与相应的 gif 一起发布。
最佳答案
在 .container 上使用 display: flex ，在 .content 上使用 margin: auto 。
这是解决flex居中问题的方法，通过这种方式可以让.content居中
b {
color: white;
}
html {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
margin: 0;
}
header {
position: absolute;
top: 0;
height: 84px;
width: 100%;
background-color: darkolivegreen;
}
footer {
position: absolute;
bottom: 0;
height: 56px;
width: 100%;
background-color: darkslateblue;
}
main {
position: absolute;
top: 84px;
bottom: 56px;
width: 100%;
background-color: #222222;
/*display: flex;
justify-content: center;
align-items: center; */
overflow: auto;
}
div.container {
display: flex;
margin: 0 auto;
width: 600px;
height: 100%;
background-color: #333333;
}
div.content {
/* flex-shrink: 0; */
margin: auto;
width: 600px;
height: 600px;
background-color: darkred;
}<!DOCTYPE html>
<html lang="en">
<!-- omitted head -->
<body>
<header>
</header>
<main>
<div class="container">
<div class="content">
<b>Lorem</b> Lots of Lorem ipsum... <b>quod</b>
</div>
</div>
</main>
<footer>
</footer>
</body>
</html> 
关于html - 将父元素居中，直到到达左上角，然后停止居中并显示滚动条？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69778248/