Question

我有一个需要居中且宽度响应（流畅）的弹出式div，但是我使用的是常用代码，左边50％，剩余负边距

width: 960px;
margin-left: -480px;    
position: absolute;
top: 20px;
left: 50%;
z-index: 999;

但是我可以让它做出回应，比如我想要

max-width: 960px

而不是绝对值？

更新：也许我不清楚，但我没有看到任何关系“在div中纵向和横向居中文字”这个问题

Answer 1

在绝对元素上，您可以使用

left: 0
right: 0
margin: 0 auto

希望这有帮助！

Answer 2

你可以试试这个：

使用transform：translate

<强> CSS

WITH
    NATIVE FUNCTION R_RandomVector(Value v_) AS
        /* R

          t( v_ %*% runif( nrow(v_) ,0,1) )

        */
    MEMBER TEST as R_RandomVector( Matrix([Product].[Product].[Article],[Product].[Product].[Article], [Measures].[Count])  )
SELECT
  TEST on 0
FROM [Sales]

Answer 3

.popupContainer{
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
}
.popup{
  background-color:#ccc;
  width:300px;
  height:300px;
}

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

您可以使用flexbox，例如此代码集：https://codepen.io/andrasadam93/pen/YrrORq

.popupContainer{
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
}
.popup{
  background-color:#ccc;
  width:300px;
  height:300px;
}

<div class="popupContainer">
  <div class="popup">

  </div>
</div>

绝对div中心和响应？

3 个答案: