html - 如何将具有最大高度的元素与垂直中心对齐？

Question

我的网站上有一个叠加弹出元素，我希望它在水平和垂直方向上都居中。我希望高度随着其中的内容而增长，但最多为窗口高度的 90%，然后转到滚动。

但问题是现在我想添加一个固定在弹出框底部的关闭按钮。我需要关闭按钮位于 overflow:auto 元素之外，但是将内容元素置于框内而不是框会使框不再垂直居中。如果您设置固定高度，它会起作用。但我希望高度是动态的并随内容一起增长，现在是内容框。

我已经尝试了所有我能想出并在网上找到的组合。我已经阅读了有关不同样式行为的文档。但是想不出解决办法。

这是一个没有关闭按钮的工作示例:

* {
  margin:0;
  padding:0;
}
body {
  font-family:Roboto;
  color:#fff;
  font-size:12px;
}
body, html {
  width: 100%;
  height: 100%;
}
h1 {
  padding-bottom:10px;
}
h2 {
  padding-bottom:7px;
}
p {
  line-height:1.5em;
  padding-bottom:10px;
}
.table {
    display: table;
    width: 100%;
}
.row {
    display: table-row;
}
.col {
    display: table-cell;
}

.popup-box.active {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: top;
  display: inherit;
}

.popup-box>.table,
.popup-box>.table>.row,
.popup-box>.table>.row>.col {
  height: 100%;
  width: 100%;
}

.popup-box>.table>.row>.col {
  vertical-align: middle;
}

.popup-box.active .popup-box-content {
  display: block;
  background-color: #272a2e;
  max-height: 90%;
  width: 90%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  vertical-align: middle;
  border-radius: 7px;
  text-align: left;
  position: relative;
  min-height: 200px;
  padding:20px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

<div class="popup-box active">
  <div class="table">
    <div class="row">
      <div class="col">

          <div class="popup-box-content">

              <h1>Popup Title</h1>

              <p class="ingress">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                book.
              </p>

              <h2>A random second title</h2>

              <p class="text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
                'Content here, content here', making it look like readable English.</p>

            </div>
          </div>
        </div>

      </div>
    </div>

这是带有关闭按钮的那个，请看第 72 行:

* {
  margin:0;
  padding:0;
}
body {
  font-family:Roboto;
  color:#fff;
  font-size:12px;
}
body, html {
  width: 100%;
  height: 100%;
}
h1 {
  padding-bottom:10px;
}
h2 {
  padding-bottom:7px;
}
p {
  line-height:1.5em;
  padding-bottom:10px;
}
.table {
    display: table;
    width: 100%;
}
.row {
    display: table-row;
}
.col {
    display: table-cell;
}

.popup-box.active {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: top;
  display: inherit;
}

.popup-box>.table,
.popup-box>.table>.row,
.popup-box>.table>.row>.col {
  height: 100%;
  width: 100%;
}

.popup-box>.table>.row>.col {
  vertical-align: middle;
}

.popup-box.active .popup-box-content-wrap {
  max-height: 90%;
  width: 90%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  vertical-align: middle;
  background-color: #272a2e;
  border-radius: 7px;
  position:relative;
}

.popup-box.active .popup-box-content {
  width:calc(100% - 40px);
  min-height: 100px;
  max-height: calc(100px - 40px); /* <--- Want this to be 100% instead of 100px */
  text-align: left;
  padding:20px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.popup-box.active .popup-box-close {
  text-align: center;
  width: 100%;
  height: 40px;
  font-size: 20px;
  line-height:160%;
}

<div class="popup-box active">
  <div class="table">
    <div class="row">
      <div class="col">

        <div class="popup-box-content-wrap">
          <div class="popup-box-content">

              <h1>Popup Title</h1>

              <p class="ingress">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>


            </div>
            
            <div class="popup-box-close">Close</div>
            
        </div>

      </div>
    </div>
  </div>
</div>

Answer 1

试试这个:

.popup-box.active .popup-box-content-wrap {
  max-height: 90%;
  width: 90%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  vertical-align: middle;
  background-color: #272a2e;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  position:relative;
}

.popup-box.active .popup-box-close {
    background-color: #272a2e;
    position: absolute;
    bottom: -40px;
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
  text-align: center;
  width: 100%;
  height: 40px;
  font-size: 20px;
  line-height:160%;
}

完整代码:

<div id="popup" class="popup-box active">
  <div class="table">
    <div class="row">
      <div class="col">

        <div class="popup-box-content-wrap">
          <div class="popup-box-content">

              <h1>Popup Title</h1>

              <p class="ingress">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>


            </div>

            <div class="popup-box-close">Close</div>

        </div>

      </div>
    </div>
  </div>
</div>

<style>
    * {
  margin:0;
  padding:0;
}
body {
  font-family:Roboto;
  color:#fff;
  font-size:12px;
}
body, html {
  width: 100%;
  height: 100%;
}
h1 {
  padding-bottom:10px;
}
h2 {
  padding-bottom:7px;
}
p {
  line-height:1.5em;
  padding-bottom:10px;
}
.table {
    display: table;
    width: 100%;
}
.row {
    display: table-row;
}
.col {
    display: table-cell;
}

.popup-box.active {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: top;
  display: inherit;
}

.popup-box>.table,
.popup-box>.table>.row,
.popup-box>.table>.row>.col {
  height: 100%;
  width: 100%;
}

.popup-box>.table>.row>.col {
  vertical-align: middle;
}

.popup-box.active .popup-box-content-wrap {
  max-height: 90%;
  width: 90%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  vertical-align: middle;
  background-color: #272a2e;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  position:relative;
}

.popup-box.active .popup-box-content {
  width:calc(100% - 40px);
  min-height: 100px;
  max-height: calc(100px - 40px); /* <--- Want this to be 100% instead of 200px */
  text-align: left;
  padding:20px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.popup-box.active .popup-box-close {
    background-color: #272a2e;
    position: absolute;
    bottom: -40px;
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
  text-align: center;
  width: 100%;
  height: 40px;
  font-size: 20px;
  line-height:160%;
}
</style>