Question

我希望div垂直和水平位于页面中间。我正在寻找一个CSS解决方案。我拿出了保证金和保证金顶部，因为它们与我的标题相混淆。

＆＃13;

/* CSS */

.mainDiv {
  background: #fff;
  padding: 20px;
  width: 450px;
  margin: auto;
  /*margin: 0px auto;
  margin-top: 200px;*/
  box-shadow: 0 0 20px #333;
}

＆＃13;

<!-- HTML -->

<div class="mainDiv" align="right">
  <h1 align="left">Firebase Web App</h1>
  <textarea placeholder="Enter text here ..."></textarea>
</div>

＆＃13;

FIDDLE

https://jsfiddle.net/gy0Lr6rg/

Answer 1

尝试使用flexboxes：

＆＃13;

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.mainDiv {
    background: #fff;
    padding: 20px;
    width: 450px;
    /*margin: auto;
    /*margin: 0px auto;
    margin-top: 200px;*/
    box-shadow: 0 0 20px #333;
}

＆＃13;

<div class="flex-container">
    <div class="mainDiv" align="right">
        <h1 align="left">Firebase Web App</h1>
        <textarea placeholder="Enter text here ..."></textarea>
    </div>
</div>

＆＃13;

Answer 2

尝试使用其他div围绕div并在其上使用height: 100%;。它在某些情况下适用于我。但它在jsfiddle中不起作用，因为高度不够大。您也可以尝试使用height: 100%;代码

上的body

Answer 3

.mainDiv {
  background: #fff;
  padding: 20px;
  width: 450px;
  height:150px;
  margin-left: -225px;
  margin-top:-75px;
  /*margin: 0px auto;
  margin-top: 200px;*/
  box-shadow: 0 0 20px #333;
  position:absolute;
  top:50%;
  left:50%;
}

<div class="mainDiv" align="right">
    <h1 align="left">Firebase Web App</h1>
    <textarea placeholder="Enter text here ..."></textarea>
  </div>

如何垂直和水平居中这个div？

3 个答案: