html - 在 div 内垂直对齐 div

Question

我有这个fiddle我需要将带有“wholebox”类的框垂直对齐到中间(或顶部或底部，可以配置)。问题是我一直在尝试互联网上的所有解决方案，但都没有奏效，我想这是因为我拥有的配置和某些属性覆盖了其他属性，所以我想要的结果是无法获得的。所以我决定只问我的具体情况。

.daliBoxSortableContainer {
  width: 100%;
  height: 236px;
  min-height: 35px;
  text-align: center;
  line-height: 100%;
  box-sizing: border-box;
  position: relative;
  padding: 0px;
  border-color: rgb(255, 255, 255);
  border-width: 0px;
  border-style: solid;
  opacity: 1;
  background-color: red
}

.wholebox {
  display: inline-block;
  position: relative;
  width: 25%;
  height: auto;
  vertical-align: middle;
  touch-action: none;
  cursor: inherit;
}

.selectedBox {
  background-color: #fff6ec;
  border: 1px dashed black;
  color: #555;
}

.helpersResizable {
  border: 1px solid #777;
  background-color: white;
  z-index: 1;
  position: absolute;
  width: 15px;
  height: 15px;
  cursor: move;
}

.boxStyle {
  width: 100%;
  height: 100%;
  position: relative;
  word-wrap: break-word;
  overflow: visible;
  visibility: visible;
  padding: 0px;
  background-color: rgb(255, 255, 255);
  border-width: 0px;
  border-style: solid;
  border-color: rgb(0, 0, 0);
  border-radius: 0px;
  opacity: 1;
}

.showOverlay {
  width: 100%;
  background: black;
  top: 0;
  bottom: 0;
  position: absolute;
  opacity: 0.4;
}

<div class="daliBoxSortableContainer">
  <div style="display: table; width: 100%; height: 100%;">
    <div style="width: 100%; height: 100%; display: table-cell; vertical-align: top;">
      <div style="width: 100%; height: 100%; position: relative;">
        <div class="wholebox selectedBox">
          <div id="resizableContainer" style="visibility: visible;">
            <div style="position: absolute; top: -2px; left: -2px; width: 100%; height: 100%; box-sizing: content-box;"></div>
            <div>
              <div class="helpersResizable" style="left: -7.5px;  top: -7.5px;"></div>
              <div class="helpersResizable" style="right: -7.5px; top: -7.5px;"></div>
              <div class="helpersResizable" style="left: -7.5px;  bottom: -7.5px;"></div>
              <div class="helpersResizable" style="right: -7.5px; bottom: -7.5px;"></div>
            </div>
          </div>
          <div class="boxStyle">
            <div style="width: 100%; height: 100%;">
              <div style="width: 100%; margin: 0px; height: 100%;">
                <img src="http://nemanjakovacevic.net/wp-content/uploads/2013/07/placeholder.png" style="width: 100%; height: 100%;">
              </div>
            </div>
          </div>
          <div class="showOverlay" style="visibility: hidden;"></div>
        </div>
      </div>
    </div>
  </div>
</div>

同样重要的是要注意 .wholebox 可以有 position:absolute 或 relative ，这取决于配置，当绝对时，可以拖动所以 top 和 left 属性将改变。高度也可以是自动的或固定的，具体取决于配置。

#resizableContainer 和 .showOverlay 我认为可以忽略 div，但我将它们包括在内以防它们的某些属性阻止我想要的结果工作

顺便说一句，如果有人知道一本关于 CSS 及其所有属性间兼容性问题的好书，将不胜感激。

非常感谢。

Answer 1

您有 2 个选择: 1. 使用 Javascript 根据用户的屏幕大小更改 div 的位置。 2. 使用 CSS 您必须为给定 div 的容器分配一些值(这种方式不可能实现绝对位置)。