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

Question

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

它们的宽度和高度必须完全相同，但它们之间的间隙为 'not a lot'。以及让他们响应。

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

Answer 1

检查这个

<style>
        #main { 
        width: 800px;
        margin: 0 auto;
    }
    #sidebar    {
        width: 400px;
        height: 400px;
        background: red;
        float: left;
    }

    #page-wrap  {
        width: 400px;
        background: yellow;
        height: 400px;
        float: right;
    }
    </style>
    <div id="main">
      <div id="sidebar"></div>
      <div id="page-wrap"></div>
    </div>

Answer 2

看看这个：http://jsfiddle.net/8uwcs679/

我创建了两个宽度为 40% 的 div。 left div 有 5% 的 margin right。因此剩余总宽度 = 100% - (40%+40%+5%) = 15%;

然后我将左边距 div 设置为 15%/2 = 7.5%，这将使 div 居中并且它也会响应。

HTML :

<div class="side left"></div>
<div class="side right"></div>

CSS :

.side{
    float: left;
    width:40%;
    height: 100px;
    background: rgba(0,0,0,0.2);
}

.left {
    margin-right: 5%;
    margin-left: 7.5%;
}

Answer 3

HTML:

<div class="parent-div">
     <div class="child-one"></div>
     <div class="child-two"></div>
</div>

CSS:

.parent-div{
    width: 100%;
    text-align: center;
}

.child-one, child-two{
    display: inline-block;
    width: 30%;
}
.child-one{
    margin-left: 5px;
}

div 的高度将由其中的内容决定。

Answer 4

最好的方法是同时使用 Viewport units: vw, vh, vmin, vmax with 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>

Answer 5

要获得完全相同的高度，我建议使用flexbox。

body { /* or use extra wrapper element */
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
}
body > div {
  background-color: orange;
  margin: 0 .25em; /* for gap */
  width: 40%;
}

<div>first. equal height by default. equal height by default. equal height by default. equal height by default. equal height by default. equal height by default. equal height by default. equal height by default. </div>
<div>second</div>

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

How to position two divs side by side in a browser window, centered

html

css