Question

那么我怎样才能将元素的内部位置固定在屏幕中间？我可以使用div设置text-align: center;的x轴。

那么我怎样才能将y轴居中，就像我做x轴一样？如果无法完成，我必须使用哪种新方法？

代码：

.fixed{
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 0px;
    position: fixed;
    background-color: #00FF00;
    top: 0px;
    overflow: hidden;
    z-index: 99;
}

.popup{
    display: inline-block;
    width: 90%;
    max-width: 900px;
    min-height: 300px;
    border: 2px solid rgba(72, 72, 72, 0.4);
    margin-bottom: 50px;
    margin-top: 20px;
}

<div class="fixed">
    <div class="popup"></div>
</div>

Answer 1

我更新了你的小提琴。只需让你的弹出类位置修复并使顶部，左侧，底部，右侧= 0然后保证金：自动。看到这个更新的小提琴。

.popup{
   position:fixed;
   top:0;
   left:0;
   right:0;
   bottom:0;
   margin:auto;
}

https://jsfiddle.net/norxpmbr/

Answer 2

对于CSIDL，请尝试将其替换为：

.popup

有了这个：

margin-bottom: 50px;
margin-top: 20px;

来源：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Answer 3

所以这就是我对您的代码所做的 - 删除了popup的边距并使用transform和position: relative进行了对中：

    .popup{
      display: inline-block;
      width: 90%;
      max-width: 900px;
      min-height: 300px;
      border: 2px solid rgba(72,72,72,0.4);
      margin    : 0;
      position: relative;
      top: 50%;
      transform: translate(0, -50%);
}

revised fiddle

以下代码段：

＆＃13;

.fixed {
  text-align: center;
  width: 100%;
  padding: 0;
  position: fixed;
  background-color: #00FF00;
  height: 100%;
  top: 0;
  overflow: hidden;
  z-index: 99;
}
.popup {
  display: inline-block;
  width: 90%;
  max-width: 900px;
  min-height: 300px;
  border: 2px solid rgba(72, 72, 72, 0.4);
  margin: 0;
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
}

＆＃13;

<div class="fixed">
  <div class="popup">
  </div>
</div>

＆＃13;

如何将元素的内部位置固定在屏幕中间？

3 个答案: