垂直居中的内容超过窗口高度 [英] vertically center content that exceeds window height

问题描述

我试图通过使用 display：flex; 来使盒子垂直居中，而当盒子足够小时它正在工作，但是当盒子超过窗口高度，部分内容将被截断。

I'm trying to vertically center a box by using display: flex;, while it's working when the box is small enough, but when the box exceeds the window height, part of the content will be cut off.

工作示例： http://codepen.io/woutr_be/pen/bVQXLe

高度较大的示例： http://codepen.io/woutr_be/pen/KdrOZm

似乎与正文相关：{height：100％; } ，但是当我删除，该框不居中： http： //codepen.io/woutr_be/pen/MazNrE

It seems to be related to the body: { height: 100%; }, but when I remove that, the box isn't centered anymore: http://codepen.io/woutr_be/pen/MazNrE

我想不出在盒子高度大的时候如何使它工作。 / p>

I can't figure out how to make it work when the box has a large height.

推荐答案

当我需要垂直对齐一个元素时，尝试改变高度和宽度，你会注意到它是如何自动计算以居中元素。

This is generally what I tend to use when I need to align an element vertically. Try changing the height and width and you will notice how it automatically calculates to center the element.

div.container{
    width: 300px;
    height: 300px;
    position: relative;
  
    background: salmon;
}

div.container > div.wrapper{
    position: absolute;
  
    top: 50%;
    left: 50%;
  
  
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  
    background: red;
}

<div class='container'>
    <div class='wrapper'>
      <label>Some text</label>
      <label>Some more text</label>
    </div>
</div>

这篇关于垂直居中的内容超过窗口高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！