logo标签列表

竖直居中，绝对定位的子元素强制父元素高度匹配。

javascriptjqueryhtmlcssheight
3
我希望在一个最小高度的父级div中有一个垂直居中的div。我使用以下代码来实现垂直居中我的div：
.parent {
    width:100%;
    min-height: 25vh;
    max-height: auto;
    position: relative; /* so center-area can be positioned absolute */
    display: inline-block;
    background:lightblue;
}
center-area {/* let it fill the whole container */
    position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;
    display: inline-block;
}    
.center-area:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.centered {
    display: inline-block;
    vertical-align: middle;
    font-size:18px;
    background:green;
    margin:20px;
}

也许需要一些JS吗？我希望蓝色的父级div的高度可以随着子元素的高度而变化...

我知道问题在于子元素被绝对定位，以便我可以垂直对齐它，但当内容超过父div的高度时，我希望父级div可以向下延伸以适应...希望这样说得清楚。

这是我的JSfiddle：

https://jsfiddle.net/mr_antlers/8s8bhzd6/

提前感谢您的建议！

欢迎来到SO！您能否提供一个已点击和未点击的外观图像？ - Ryan Gates
这必须使用纯CSS完成吗？如果需要满足所有要求，我只能想到使用JavaScript的解决方案。 - J.Joe
3个回答
4
您尝试过在父元素 .parent 上使用 display:table-cell，在居中元素 .centered 上使用 vertical-align: middle，并删除 .center-area 吗？ 

$('.addContent').click(
    function(el) {
        $(el.target.parentElement).append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat quam bibendum nibh cursus viverra. Duis suscipit bibendum faucibus. Praesent sit amet lectus sapien, ut dignissim augue. Aliquam sollicitudin nisi a nunc lobortis mollis. Phasellus vitae dolor ac orci porttitor lacinia at at augue. In dui eros, sodales ac gravida at, adipiscing rhoncus dolor. In tellus purus, scelerisque eu suscipit venenatis, tincidunt sit amet risus. Nunc sed nibh eu neque mattis varius in eget erat. Etiam sit amet felis lacus, placerat tincidunt dolor.</p>');
    }
);
.parent {
    width:100%;
    min-height: 25vh;
    max-height: auto;
    position: relative; /* so center-area can be positioned absolute */
    display: table-cell;
    background:lightblue;
}

.centered {
    vertical-align: middle;
    font-size:18px;
    background:green;
    margin:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app="myModule">
<div class="parent">
  <!-- <div class="center-area"> -->
      <div class="centered"><p><button class="addContent">add content</button><strong>This content is vertically centered inside this div... </strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat quam bibendum nibh cursus viverra. Duis suscipit bibendum faucibus. Praesent sit amet lectus sapien, ut dignissim augue.</p>
          <div style="clear: both"></div>
      </div>
  <!-- </div> -->
</div>
</body>

.parent 的 min-height: 25vh; 似乎被忽略了。 - J.Joe
1

我想我已经通过一些研究自己找到了解决方案... 我会测试并在这里发布，以帮助其他人。

我会回来告诉你的！

如果您在这里找到了答案，请将其标记为已回答。 - mhatch
1
您可以将 .parent 的 background 设置为 transparent，将 .centered 的 border 属性设置为 50px /* 或其他值，如 75px、100px */ solid lightblue。
html,
body {
  font-family: Helvetica, Arial, Sans-Serif;
  padding: 0px;
  margin: 0px;
}

.parent {
  width: 100%;
  min-height: 25vh;
  max-height: auto;
  position: relative;
  /* so center-area can be positioned absolute */
  display: inline-block;
  background: transparent;
}

center-area {
  /* let it fill the whole container */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: inline-block;
}

.center-area:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.centered {
  display: inline-block;
  vertical-align: middle;
  font-size: 18px;
  background: green;
  z-Index: 1;
  border: 50px solid lightblue;
}

.clear_both {
  clear: both;
}


$('.addContent').click(
  function(el) {
    $(el.target.parentElement).append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat quam bibendum nibh cursus viverra. Duis suscipit bibendum faucibus. Praesent sit amet lectus sapien, ut dignissim augue. Aliquam sollicitudin nisi a nunc lobortis mollis. Phasellus vitae dolor ac orci porttitor lacinia at at augue. In dui eros, sodales ac gravida at, adipiscing rhoncus dolor. In tellus purus, scelerisque eu suscipit venenatis, tincidunt sit amet risus. Nunc sed nibh eu neque mattis varius in eget erat. Etiam sit amet felis lacus, placerat tincidunt dolor.</p>');
  }
);
html,
body {
  font-family: Helvetica, Arial, Sans-Serif;
  padding: 0px;
  margin: 0px;
}

.parent {
  width: 100%;
  min-height: 25vh;
  max-height: auto;
  position: relative;
  /* so center-area can be positioned absolute */
  display: inline-block;
  background: transparent;
}

center-area {
  /* let it fill the whole container */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: inline-block;
}

.center-area:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.centered {
  display: inline-block;
  vertical-align: middle;
  font-size: 18px;
  background: green;
  z-Index: 1;
  border: 50px solid lightblue;
}

.clear_both {
  clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="parent">
  <div class="center-area">
    <!--
    -->
    <div class="centered">
      <p>
        <button class="addContent">add content</button><strong>This content is vertically centered inside this div... </strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat quam bibendum nibh cursus viverra. Duis suscipit bibendum faucibus. Praesent sit
        amet lectus sapien, ut dignissim augue.</p>
      <div style="clear: both"></div>
    </div>
  </div>
</div>

jsfiddle https://jsfiddle.net/8s8bhzd6/2/

我认为你的解决方案不是动态的：https://jsfiddle.net/8s8bhzd6/4/ 如果内容很小，那么一切都会改变。 - J.Joe
不太对...我想要原始内容在一个更大的div中垂直居中...然后，如果添加了内容，导致它最终比父容器更高，那么父容器就会"破裂"，脱离其位置变为静态或相对定位...因此，它的高度将受到其子div的影响...不再是绝对定位。 - T.D
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接