Question

我想知道如何让div停留在窗口调整大小的位置。例如将div元素放在页面中心的下方。谢谢！

<body>

<div class="container">
    <div class="e1">
    <button type="button" class="btn">Basic</button>    
    </div>

</div>

css

    html { 
   width:100%; 
   height:100%; 
   background:url(logo1.png) center center no-repeat;
}
.e1{
    position: absolute;
    top: 60%;
}

Answer 1

你可以试试像这样使用flex：

body {
  height: 100vh;
  margin:0;
  background: url(https://lorempixel.com/800/800/) center center no-repeat;
}

.container {
  height:100%;
  display: flex;
  flex-direction: column;
}

.container:after,
.container:before {
  content: "";
  flex: 1;
}

.e1 {
  text-align: center;
}

<div class="container">
  <div class="e1">
    <button type="button" class="btn">Basic</button>
  </div>

</div>

Answer 2

尝试使用此代码，使您的内容保持在窗口调整大小的位置

div{
position:absolute;
left:50%;
transform:translateX(-50%);
}

在窗口调整大小时让div留在它的位置

2 个答案: