Question

需要将box-inside div dead center定位到包装器div，其中包装器div的高度取决于侧栏div高度。 box-inside div相对于包装div设置为绝对值，并设置一个可变的宽度和高度，它与图像和内部的内容相对应。

这可以通过为box-inside div提供宽度和高度来实现，但是与宽度和高度的变化有关。（盒子内部div必须与带有填充的img尺寸相同）

jsFiddle代码 here

这是HTML代码：

    <body>
        <div class="wrapper">
            <div class="sidebar"></div>
            <div class="inside-box">
                <img src="badge.gif" />
            </div>
        </div>
    </body>

CSS

    * {
    margin: 0;
    }

html,body {
    height: 100%;
    }

body {
    background: white;
    display: block;
    font-family: Tahoma, Geneva, sans-serif;
    margin: 0;
    padding: 0;
    }

.wrapper {
    position:relative;
    height: auto;
    width:70%;
    margin: 0 auto ;
    background:green;

    }
.sidebar {
    height: 500px;
    width:30%;
    background: red;
    clear:both;
    }
.inside-box {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background:yellow;
    min-width:275px; min-height:183px;
    padding:10px;
    }

目前 enter image description here

预期产出 enter image description here

Answer 1

试试这个根据预期输出的jsfiddle＆amp;您的代码几乎没有变化。 看看它 -
jsfiddle

Answer 2

您需要添加一些额外的包装元素，如下所示：

<div class="wrapper">
    <div class="sidebar"></div>
    <div class="inside-box">
        <div class="inside-wrap">
            <div class="inside-cell">
                <div class="content-wrapper">
                    <img src="http://s21.postimg.org/lgwltcynr/image.jpg" />
                    <p>Tyger Tyger burning bright...</p>
                </div>
            </div>
        </div>
    </div>
</div>

并应用以下CSS：

.inside-box {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.inside-wrap {
    display: table;
    width: 100%;
    height: 100%;
}
.inside-cell {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
}
.content-wrapper {
    background-color: yellow;
    padding: 10px;
    display: inline-block;
}

解决方案依赖于使用CSS表格单元格，除了较旧的IE浏览器之外，它还有很好的支持。

.inside-box包装器用于识别依赖于某些子元素（如侧边栏）的父块的尺寸。

.inside-wrap使用display: table来捕捉100％的高度和宽度。

.inside-cell使用display: table-cell并允许垂直和水平对齐。

最后，您需要.content-wrapper根据需要绘制黄色背景并添加一些填充。

.content-wrapper是一个独立的单元，因此您可以在其中放置浮动元素而不会破坏任何内容。

请参阅演示：http://jsfiddle.net/audetwebdesign/6XSqD/

如何在可变高度的流体布局中定位元素死点？

2 个答案: