Question

我有这个HTML：

<div class="lightbox">          
    <div class="lightbox-content-wrapper">
        <div class="lightbox-content-inner-wrapper">                    
            <div class="lightbox-content">
                <!-- Popup Form -->
                <div class="lightbox-form-wrapper">
                    Test
                </div>
            </div>
        </div>             
    </div>
</div>

和这个CSS：

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  background: rgba( 0, 0, 0, .7 ) repeat;
}

.lightbox-content-wrapper {
  background-color: #FFF;
  width: 20%;
  position: fixed;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: table;
  text-align: center;
  border: 10px solid #2980B9;
}

这是小提琴：http://jsfiddle.net/p2omaw29/1/。

我想创建一个放在屏幕中央的灯箱。如果您在Chrome和Firefox中打开小提琴，您会发现它会产生不同的结果。在Chrome中，该框位于屏幕中央，而在Firefox中，它位于顶部，就像bottom: 0;规则不起作用一样。

那么实际上是什么让结果有所不同？我一直在调整一些CSS一小时没有结果。

提前谢谢！

Answer 1

将底部和顶部设置为零，使元素的高度为100％。它从最顶端开始，到最后结束。浏览器中的结果不同是由于显示表属性的不同实现。如果将其设置为table-cell，则可以看到两个浏览器中实际发生的情况。

以下是如何使元素位于屏幕中心的位置。

.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    background: rgba( 0, 0, 0, .7 ) repeat;
}

.lightbox-content-wrapper {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    background-color: #FFF;
    width: 20%;
    text-align: center;
    border: 10px solid #2980B9;
}

http://jsfiddle.net/09euw1by/

请注意，它在Internet Explorer 8及更低版本中不起作用，并且您需要为Internet Explorer 9添加前缀。

http://www.w3schools.com/cssref/css3_pr_transform.asp

Chrome和Firefox中固定元素CSS的不同结果

1 个答案: