代码之家 › 专栏 › 技术社区 › Francesco

绝对div中心和响应?[副本]

css

Francesco · 技术社区 · 8 年前

我有一个弹出div,需要居中 (流体),但我使用的是公共代码,左边是50%,左边是负数

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

但是我能让它有反应吗,比如说如果我想

max-width: 960px

而不是绝对值?

使现代化 :可能我不清楚,但我看不出与“在div中垂直和水平居中文本”问题有任何关系

3 回复 | 直到 8 年前

will 8 年前

在绝对元素上,可以使用

left: 0
right: 0
margin: 0 auto

-1

justDan 8 年前

.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>

-1

Luís P. A. 8 年前

使用变换:平移

CSS

width: 960px;  
position: absolute;
top: 20px;
left: 50%;
transform:translateX{-50%}
z-index: 999

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前