Question

我想在最小高度的父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的高度允许时，我希望父母潜水延长页面以适应。 ..我希望这是有道理的。

这是我的JSfiddle：

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

提前感谢您的建议！

Answer 1

您是否尝试将display:table-cell用于.parent，将vertical-align: middle用于.centered，删除.center-area？

＆＃13;

$('.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>');
    }
);

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可以将toy$user[match(toy$parent, basename(as.character(toy$URL)))] #1] <NA> john #Levels: john mary .parent设置为background，将transparent的{{1}}属性设置为border

.centered

50px /* or other value, e.g., 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>');
  }
);

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

Answer 3

我想我已经通过一些研究自己制定了一个解决方案......我会对它进行测试并将其发布在这里，以防其他人帮助。

我会回复你！</ p>

垂直居中，绝对定位的子力父高度匹配

3 个答案: