Question

我正在尝试制作一个简单的网页，尽可能地显示GIF，但位于页面中央。我希望图像垂直居中。这是JSFiddle的链接。

<!DOCTYPE html>
<html>
<head>
    <title>Gandalf Sax Guy!</title>
</head>
<body>
<style>

body {
    overflow: hidden;
    background-color: black;
    margin: 0;
}

img {
    width: 100%;
    height: 100%;
}

</style>

    <img src="http://eul.ddns.net/gandalf/gif.gif"/>

    <audio autoplay sr>
        <source src="http://eul.ddns.net/gandalf/sax.mp3">
    </audio>

我希望图片尽可能大，但不要扭曲，并动态工作。

正如您所看到的，我希望图像具有相同数量的黑色空间＆＃34;在它上面和下面。

Answer 1

flexbox救援！

#positioning-context {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<div id="positioning-context">
  <img src="https://placekitten.com/140/50" />
</div>

Answer 2

翻译（-50％）方法，评论中的更多信息

img {
  position: absolute;
  top: 50%; left: 50%; 
  /* the above combined with translate -50% will..
  center it horizontally and vertically */
  transform: translate(-50%, -50%);
  width: initial; /* no width setting will size it as its original size */
  width: 100%; /* control image size based on screen width */
  width: 50%; /* try all 3 to see */
  width: 17%;
  /* dont mess with height and it will scale with the width */
  /* or only adjust height and let image width scale to it */
  /* height: 100%; */
}

<img src="https://i.stack.imgur.com/Dpd0U.jpg?s=48&g=1">

CSS Tricks有一篇关于不同中心化方法的文章。

https://css-tricks.com/centering-css-complete-guide/

fiddle to play with

如何垂直居中图像并使其填充可用宽度

2 个答案: