Javascript 将图像与截面中心对齐，并与浏览器相对

在我的网站中，我将此部分放在

标签内。以下是一个片段：

<div id="section" class="featurecontent">
    <section>
        <img src="image.jpg" alt="Featured article">
        <p class="pnews">Featured Article - Description </p>
        <hr>
    </section>
</div>

---

如何将图像相对放置在剖面图块的中心（而不是放置在左侧），并相对于浏览器的大小（类似于剖面图块）进行自我调整？我知道

align=“middle”

不适用于HTML5

要使图像居中（我认为这是目标），只需将注释旁边的代码添加到当前CSS中即可

.featurecontent{
    height: 1100px;
    vertical-align: middle;
    border-width: 2px;
    line-height: 0.5;
    padding: 1px;   
    text-align: center; /* New line of code to center img */
}

---

你有一大堆不必要的代码。。。您所需要的只是：

#section {
  position: relative;
  width: 35%;
  margin: 0 auto;
}

.featurecontent {
  text-align: center;
}

#section {
  position: relative;
  width: 35%;
  margin: 0 auto;
}

.featurecontent {
  text-align: center;
}