Question

美好的一天

当定义宽度和高度时，

定心元素很容易：例如。

宽度：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;
}

Answer 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;
}

Answer 2

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

假设你有：

#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;
}

查看FIDDLE

Answer 3

提供以下CSS，

#imageModal #imageHolder img {
        margin 0 auto;
}

Answer 4

我必须更改几个地方才能使其正常工作。稍微更改标记并添加一些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/

以弹出FLUID div为中心

4 个答案:

HTML

CSS