兩列文字，中間居中

Question

我到處走走了很多，但找不到關於如何在兩列文字頁面的垂直和水平中心放置圖像的教程或建議。 我已經看到了將圖像跨兩列但在文本頂部對齊的說明。 我想在中間中間對齊圖像。

這有可能嗎？ 我更願意在CSS中執行此操作，但會考慮所有可行的方法（尤其是附帶一些說明。）感謝您可以提供的任何幫助（即使是告訴我放棄）。

Answer 1

我發現這里描述的技術非常有效：

HTML

<div class="container">
  <div class="inner">
    <img src="//placehold.it/200x200">
  </div>
</div>

CSS

.container {
  text-align: center;
}

.container:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
 }

.inner {
  display: inline-block;
  vertical-align: middle;
 }

Answer 2

我不知道這是您要找的東西。

1）創建兩個div（作為列），然后將圖像放在中間（圖像將與兩列重疊。）

DEMO

 img
 {
 background: red;
 height: 300px;
 width:400px;
 margin: auto;
 position: absolute;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 }

2）創建2個div（作為列），不透明度為0.5，並將圖像放在中間（由於添加了z-index，因此圖像的作用類似於背景）

DEMO

img
{
z-index:-1;
}

祝好運！！