我如何在页面上水平和垂直居中图像，除非它太大而无法容纳？
我正在尝试使用HTML和CSS实现一个基本的图像查看器，其中图像在页面中保持居中，除非它太大而无法容纳。在这种情况下，用户应该能够滚动查看没有边距的图像的其余部分。如果只有一个尺寸太大而无法容纳，则另一个尺寸将保持居中。除了图像之外，页面上没有其他内容。
但是，图像的大小需要由缩放因子指定，以便我可以相对于其原始大小放大或缩小它。这意味着我不能使用以像素为单位的显式宽度/高度，也不能相对于页面大小调整它的大小。我尝试过调整它的transform css属性，比如transform: scale(2.5)，但这通常会导致图像的顶部被截断。我也尝试过这样做，将图像的display属性设置为inline-block，并将其height属性设置为auto，这样我就可以将其width设置为我希望其缩放的百分比，但我不知道如何使其在页面上居中，如上段所述。
我如何才能做到这一点呢？到目前为止，我已经尝试了十几种不同的方法来使页面上的元素居中，但没有一种方法能达到我想要的效果。例如，我使用了flexboxes来保持图像的水平和垂直居中，但是一旦图像变得太高而不适合，(再次)图像的顶部就会被切断。
回答 2
Stack Overflow用户
发布于 2018-05-29 07:24:45
有几种方法可以实现水平和垂直对齐。然而，它们通常是以不同的方式单独完成的。你可以看看W3Schools，他们对每一个都做了一些教程：
另外，如果你愿意使用bootstrap (让一切变得更容易，特别是居中)，你可以看看下面的链接：
BootStrap Grid System Tutorial
下面是一种快速居中的方法。功劳归功于：This Post，我自己做了一些小改进。
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
text-align:center;
/*whatever width you want*/
}<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
Stack Overflow用户
发布于 2018-05-29 07:28:54
您可以使用flexbox和center with margin来获取以下内容：
body {
min-height:100vh;
margin:0;
display:flex;
}
body > img {
margin:auto;
}<img src="https://picsum.photos/500/500?image=1069" >
如果你不想滚动应用max-height/max-width
body {
height:100vh;
margin:0;
display:flex;
}
body > img {
margin:auto;
max-width:100%;
max-height:100%;
}<img src="https://picsum.photos/500/500?image=1069" >
https://stackoverflow.com/questions/50574397
复制相似问题