Question

遇到一个我从未目睹过的新css问题。很简单，创建一个类似模态的结构，其中父元素用文本对齐中心固定，如下所示：

.pro-gallery-wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
opacity: 1;
z-index: 9999;
overflow-y: auto;
overflow-x: hidden;
text-align: center;
}

和它的孩子：`

.pro-gallery {
position: absolute;
top: 50%;
display: inline-block;
z-index: 9999;
background-color: white;
max-height: 100%;
@include transform(translateY(-50%));
@include box-shadow(0 5px 15px rgba(0,0,0,.5));
@media (min-width: $screen-sm-min) {
    max-width: em(768px);
}
@media (min-width: $screen-md-min) {
    max-width: em(875px);
}
@media (min-width: 1589px) {
    max-width: em(1489px);
}
}

现在发生的事情是孩子居中，但不是从中心向外延伸，div的左侧从中心开始向右扩展。

这是一个完整的异常，来自我使用完全相同技术的网站的其他区域。有什么想法吗？

http://hannahhamlin.co.uk/Projects/Final-Collection

Answer 1

你需要添加左：50％;并将-x转换为-50％

.pro-gallery-wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
opacity: 1;
z-index: 9999;
overflow-y: auto;
overflow-x: hidden;
text-align: center;
background: #f00;
}

.pro-gallery {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
display: inline-block;
z-index: 9999;
background-color: white;
max-height: 100%;
transform: translate(-50%, -50%);
box-shadow: 0 5px 15px rgba(0,0,0,.5);
background: #0f0;
}

<div class="pro-gallery-wrapper">
      <div class="pro-gallery">gallery goes here</div>  
    </div>

水平居中div不按预期工作

1 个答案: