位置 div 中心水平和垂直答案

【问题标题】：position div center horizontal and vertical位置 div 中心水平和垂直
【发布时间】：2011-02-13 03:35:25
【问题描述】：

我想将一个弹出 div 居中我怎样才能使浏览器友好？？？？

这是原版在左边一点。

<div class="popLayerWrapper">
    <div id="addBookmarksLayer" class="popLayer" style="left:260px; padding:30px;">
        <div class="closeLayer" >close</div>
        <div class="layerContent"></div>
    </div>
</div>

【问题讨论】：

标签： css

【解决方案1】：

不确定我是否理解您想要居中的部分，但假设整个事情：

.popLayerWrapper {
   position: absolute;
   width: 40%;  /* could be anything */
   left: 50%;
   margin-left: -20%;  /* half of width */
   height: 40%;    /* again, could be anything */
   top: 50%;
   margin-top: -20%;  /* half of height */
}

【讨论】：

为了确保它在顶部，您可能需要输入类似：z-index: 10;也在那里

【解决方案2】：

我使用这段代码将一个元素置于窗口视口的中心：

html {
  display: table;
  table-layout: fixed;
  width: 100%; 
  height: 100%;
}

body {  
  display: table-cell;  
  width: 100%; 
  height: 100%;
  vertical-align: middle;
  margin:0;
}

#center {
  margin: auto;
}

您将在此链接 (Bredele CSS bundle) 中找到完整示例。我认为它应该适用于您的弹出窗口。

奥利维尔

【讨论】：