Css 对中弹出的流体div

你好

定心元素很容易，当它们定义了宽度和高度时：例如

宽度：500px； 高度：400px

流体布局存在问题：

但是我有一个模式弹出窗口（lightbox），我用它来放大缩略图像…：

问题是我无法使它居中，它浮动在左上方…我希望它绝对居中：垂直和水平

这是我的模式弹出代码 还可以查看我的视图以了解我的意思（尝试调整视口的大小）

HTML:

给出以下CSS

#imageModal #imageHolder img {
        margin 0 auto;
}

---

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

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

X

---

检查工作演示：

这是未知宽度/高度的居中方式：

HTML

---

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

假设你有：

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

---

请参见

您的测试页面没有显示任何内容。顺便说一句，在不知道宽度/高度的情况下使用CSS将事物居中是非常容易的…这里有无休止的讨论。单击图像查看一些内容谢谢我看到给img本身留一个边距：0 auto将使其水平居中，但不是垂直居中…您有何建议？访问：谢谢，但是你给了它一个固定的宽度和高度。我正在寻找一个流体div的中心：一个具有百分位数宽度和高度的div。我这样做只是为了举例，它不必是那样的，它可以改变…谢谢，但是你的图像是左上角对齐的…请看公认的答案-这就是我想要的…如果我没有清楚地表达我的问题，请道歉well@DextrousDave单击此图像以查看正在运行的演示：）

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

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

#parent {

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

    text-align: center;
}

#parent {

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

    text-align: center;
}