Question

我想要一个垂直和水平居中的div，即在页面的中心。我尝试了位置：绝对并让div的右上角左下角0！但问题是，当我放大页面时，它与其他标题和其他div重叠！请帮我！如何在放大页面时将div放在页面中心而不重叠其他div？

就像我尝试过的那样：

.center{
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
 }

Answer 1

＆＃13;

html, body {
  height:100%;
}

.center {
  border: 2px solid blue;
  margin: auto;
  position: relative;
  text-align: center;
  top: 50%;
  width: 20%;  
}

＆＃13;

<div class="center">
  <p>Test Text</p>
</div>

＆＃13;

Answer 2

尝试，

html{
  height:100%;
}
body
{ height:100%;
  background-color: #fcfcfc;

}
.center
{
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: #ccc;
  border-radius: 3px;
}

<div class="center"></div>

Answer 3

试试这个

HTML

<div class="center">
  Lorem ipsum dolor sit amet, 
</div>

CSS

html,body{
  height:100%;
}
.center{
  position: relative;
  top:50%;
  left:50%; 
}

Link for reference

希望这有助于......

Answer 4

要将块元素（如div）水平居中，请使用margin：auto

＆＃13;

SampleEntity

＆＃13;

.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}

＆＃13;

Answer 5

Flex是最佳解决方案，完美定位。

如果你想要一个装载机，只需做一个固定位置的全尺寸div，并使用flex作为div内容。

Flex指南https://css-tricks.com/snippets/css/a-guide-to-flexbox/

body, html {
  height:100%
}

body {
  display:flex;
  margin:0;
  flex-direction:column;
}

.mydiv {
  margin:auto;
}

<div class="mydiv">test</div>

Answer 6

这是您的HTML正文
<div class="testbox">  </div>

这是您的CSS
.testbox { width: 800px; margin: 0 auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

Answer 7

2020.4.23
从实际项目中应对

'51'

如何在页面中心对齐div？

7 个答案: