在css中垂直居中div

Question

我想在代码后面对齐#container：

<div id="container">
   <p>new</p>
</div>

的CSS -

#container {
   position:relative;
   width:100%;
   background:red;
   padding:10px;
   float:left;
   margin-left:30%;/*for centering*/
}

p {
    text-align: center; 
}

内容与内容无法正确对齐，请帮助我。

Answer 1

你想要一个100％的div和一个具有特定宽度和边距0 auto的孩子

#body  {
  width: 100%;
  }

#container {
  width:100px;
  background:red;
  padding:10px;
  margin:0 auto;/*for centering*/
}

p {
    text-align: center; 
}

<div id="body">
  <div id="container">
    <p>new</p>
  </div>
</div>

Answer 2

试试这个 -

#container {
   position:relative;
    width:100%;
    background:red;
    padding:10px;
    display: flex;
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    }

    p {
        text-align: center; 
    }