Html 垂直对齐元素 我的布局有三列，左边和右边代表我要在中间垂直对齐的按钮。 我希望将块的位置保持为“绝对”。我也不喜欢将高度设置为某个像素值，因为布局对于不同大小的屏幕应该是灵活的

我找到了一个几乎可以正常工作的解决方案——将“top”设置为50%并调整padding top，不幸的是，这个解决方案增加了一个滚动条

以下是我目前为止所拥有的解决方案：50%和滚动

html:

<div class="single_image">
    <div class="wrapper">
        <div class="container">
            <div class="photo" data-ng-style="{'background-image': 'url(' + photoUrl + ')'}"
                 style="background-image: url(http://img4.wikia.nocookie.net/__cb20131213104910/disney/images/f/f6/Eiffel_Tower,_Paris.jpg);"></div>
        </div>

        <aside class="arrow_button left">
        <span data-ng-include="'/img/photoGallery/arrow.svg'" data-ng-click="showPreviousImage()"
              data-ng-if="isPreviousBtnVisible()" class="ng-scope">
            <svg x="0px" y="0px" width="16.994px" height="25.972px" viewBox="0 0 16.994 25.972" style="enable-background:new 0 0 16.994 25.972;" xml:space="preserve" class="ng-scope">
            <path style="fill-rule:evenodd;clip-rule:evenodd;fill:#010202;" d="M16.994,22.598l-3.505,3.374L0,12.986L13.489,0l3.505,3.374
                l-9.985,9.612L16.994,22.598z"></path>
            </svg>
        </span>
        </aside>

        <aside class="arrow_button right">
        <span data-ng-include="'/img/photoGallery/arrow.svg'" data-ng-click="showNextImage()"
              data-ng-if="isNextBtnVisible()" class="ng-scope">
            <svg x="0px" y="0px" width="16.994px" height="25.972px" viewBox="0 0 16.994 25.972" style="enable-background:new 0 0 16.994 25.972;" xml:space="preserve" class="ng-scope">
            <path style="fill-rule:evenodd;clip-rule:evenodd;fill:#010202;" d="M16.994,22.598l-3.505,3.374L0,12.986L13.489,0l3.505,3.374
                l-9.985,9.612L16.994,22.598z"></path>
            </svg>
        </span>
        </aside>
    </div>
</div>

---

我取的高度：100%；关闭.arrow_按钮，滚动条消失。这就是你想要的吗？

非常好！但是请注意，如果将

置于一旁

设置为

高度：100%

的原因是为了提供更大的点击目标，则需要稍微复杂一些的更改。

.arrow_button {
    top: 50%;
    height: 100%;
    line-height: 100%;
    cursor: pointer;
    position: absolute;
    float: left;
}

    .arrow_button.left{
        left: 0px;
    }
    .arrow_button.right{
        right:0px;
    }

    .arrow_button.right svg{
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }