【问题标题】：Centering image on full page with CSS [closed]使用 CSS 在整页上居中图像 [关闭]
【发布时间】：2015-01-09 21:10:14
【问题描述】：

我已经结合了一些关于居中图像的答案，因此它可以在完整的 HTML 页面上使用。

    .image-center {
        vertical-align: middle;
        margin: 1em 0;
    }
    
    .helper {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    
    .vert-center {
    	min-height: 10em;
    	vertical-align: middle;
    	height: 100%;
    }
    
    .horz-center {
    	text-align: center;
    }
    
    html, body {
    	height: 100%;
    }

<body>
     	<div class="vert-center horz-center">
     		<span class="helper"></span>
    		<img src="img/image.gif" class="image-center" />
    	</div>
    </body>

这样，图像将垂直居中，因为它的容器位于页面的 100% 高度。这通常是图像本身不垂直居中的方式。

希望对你们中的一些人有所帮助。

【问题讨论】：

这应该是问答的形式，而不是问题的形式。

标签： html css

【解决方案1】：

或者，您避免了这么多“糟糕”的 css 样式约定，并采用类似下面的方法，正如关于此问题的数千个其他 SO 问题中所述。

选项 1

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table;
}
.container {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.content {
    display: inline-block;
    text-align: left;
    
}

<div class="container">
    <div class="content">
      <img src="http://placekitten.com/g/200/300" alt="" />
    </div>
</div>

选项 2

.parent {
    display: table;
    height: 300px;
    background: yellow; 
    width:300px;
}
.child {
    
    display: table-cell;
    vertical-align: middle;
    text-align:center;

}

<div class="parent">
    <div class="child">
      	<div class="content">XXX</div>
    </div>
</div>

选项 3

#outer {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      text-align:center;
    }
    #inner {
      width: 50%;
      height: 50%;
      top: 25%;
      margin: 0 auto;
      position: relative;
      background: orange;
    }

<div id=outer>
    <img id=inner src="http://placekitten.com/g/200/300" alt=""/>
  </div>

选项 4

如果您知道图像（和 div）的大小，您可以应用如下边距：

.container {
  height: 300px;
  width: 300px;
  background: #eee;
  position: absolute;
   
  margin: -150px 0 0 -150px;
  left: 50%;
  top: 50%;
}
 
.box {
  height: 100px;
  width: 100px;
  background: #222;
  position: absolute;
   
  /*Centering Method 2*/
  margin: -50px 0 0 -50px;
  left: 50%;
  top: 50%;
}

<div class="container">
   <div class="box"></div>
</div>

选项 5

居中文本在 css 中也是轻而易举

.container {
  height: 200px; /*Set line-height to this value*/
  width: 400px;
  background: #eee;
  margin: 150px auto;
}
 
h1 {
  font: 40px/200px Helvetica, sans-serif;
  text-align: center;
}

<div class="container">
  <h1>I'm centered!</h1>
  </div>

选项 6（IMO 最好）

使用背景图片定位

.container {
  height: 300px;
  width: 300px;
  margin: 150px auto;
  background: #eee url(http://lorempixum.com/100/100/nature/4) no-repeat center;
}

&lt;div class="container"&gt;&lt;/div&gt;

因此，如您所见，只需几行代码即可实现这一目标的方法有很多。

【讨论】：

是的，最后一个选项似乎是我在网上找不到的更好的解决方案，也许更好的搜索方法是“居中背景图像”而不是简单地“使用 css 居中图像”这并没有完全解决这个问题。这就是我在这里发布的原因，以帮助其他使用我使用过的术语进行搜索的人。谢谢。