html - 如何在浏览器窗口中并排放置两个 div，居中

Question

有人可以告诉我如何将两个 div 水平并排放置在浏览器窗口的中心吗？

它们的宽度和高度必须完全相同，但它们之间的间隙“不多”。以及让他们响应。

我在堆栈中寻找答案，但没有一个答案涵盖我想要实现的目标。

Answer 1

最好的方法是使用 Viewport units: vw, vh, vmin, vmax与 the calc() CSS function 在一起。

*{box-sizing: border-box; padding: 0; margin: 0} /*reset all browser style*/

:root{background: black; min-height: 100vh; width: 100vw} /*set the root element to viewport*/

body{ text-align: center} /*ask the browser to set the box in the middle of the screen*/

article{
  background: white;
  width: calc(50vw - 40px);  /*reserve 20x2px for the margin*/
  height: calc(100vh - 20px);  /*reserve 10x2px for the margin*/
  display: inline-block;
  margin: 20px 10px   
}

<article></article>
<article></article>

但是你也可以使用百分比

*{box-sizing: border-box; padding: 0; margin: 0}

:root{background: black; min-height: 100vh}

section{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center
}

article{
  background: white;
  width: 48%;
  height: 90%;
  display: inline-block;
  margin: 5% auto
}

<section>
  <article></article>
  <article></article>
</section>