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>

Answer 2

检查

<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 3

检查出来：http://jsfiddle.net/8uwcs679/

我创建了两个宽度为40％的div。 left div的保证金权利为5％。因此剩余的总宽度= 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 4

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 5

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

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

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

5 个答案: