1

再会

当元素定义了宽度和高度时，居中元素很容易：例如。

宽度：500px；高度：400px；

问题来自流体布局：

但我有一个模态弹出窗口（灯箱），用于放大缩略图......：

问题是我不能让它居中，它在左上浮动......我希望它绝对居中：垂直和水平

这是我的模态弹出代码另请参阅我的JSFIDDLE以了解我的意思（尝试调整视口大小）

HTML：

<div id="imageModal">
    <div id="close_button">X</div>
    <div id="imageHolder"></div>
</div>

CSS：

#articleFeatured img{
    width: 200px;
    height: 113px;
}
#imageModal {
    position: fixed;
    z-index: 1024;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(50, 50, 50);
    background: rgba(0, 0, 0, 0.6);
    vertical-align: middle;
}
#imageModal #imageHolder {
    display: table;
    vertical-align: middle;
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #0088cc;
}
#imageModal #imageHolder img {
    max-width: 100%;
    max-height: 100%;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}
#close_button {
    position: absolute;
    z-index: 9999;
    opacity:0.8;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter:alpha(opacity=80);
    display: inline-block;
    max-width: 45px;
    max-height: 45px;
    width: 100%;
    height: 100%;
    float: left;
    top: 0;
    left: 0;
    padding: 10px;
    cursor: pointer;
}
4

4 回答 4

1

这就是您将未知宽度/高度居中的方式：http: //jsfiddle.net/nhGLH/2/

HTML

<div class='centered'>
    you can change the width and height 
    of this and it will always be centered
</div>

CSS

.centered{ 
    // mus have width & height 
    width:400x;  
    height:250px; 
    // absolute position must have all directions set to "0"
    position:absolute;
    left:0; right:0; top:0; bottom:0;
    // final centering trick
    margin:auto;
}
于 2013-03-23T11:15:49.363 回答
1

正如您为宽度和高度定义流体尺寸一样，您需要将流体尺寸添加到您的定位属性中：顶部、左侧等

假设你有：

#parent {

    width: 50%;
    height: 50%;
    position: absolute;
    /*(or relative)*/
    top: 25%;
    left: 25%;

    text-align: center;
}

顶部尺寸 + 左侧尺寸 = 宽度或高度的剩余尺寸。所以 25%（上）+ 25%（左）= 100% - 50%（宽度）...

所以使用另一个宽度，高度将产生：

#parent {

    width: 20%;
    height: 20%;
    position: absolute;
    /*(or relative)*/
    top: 40%;
    left: 40%;

    text-align: center;
}

看小提琴

于 2013-03-27T14:16:35.233 回答
0

给以下CSS，

#imageModal #imageHolder img {
        margin 0 auto;
}
于 2013-03-23T10:55:57.610 回答
0

为了使其正常工作，我不得不更改几个地方。稍微更改标记并添加一些 CSS 以支持垂直对齐。

<div id="articleFeatured">
    <div class="img">
        <div class="close_button">X</div>
        <img src="http://lorempixel.com/200/115/food/1">
    </div>
</div>

检查工作演示：http: //jsfiddle.net/yKezB/12/

于 2013-03-23T11:15:07.397 回答