Я пытаюсь центрировать элемент вертикально внутри родительского элемента с помощью CSS. Родительский элемент имеет динамическую высоту, и я бы хотел, чтобы родительское поле прокручивалось, если высота родительского элемента меньше высоты дочернего элемента. Я попытался использовать flex box и метод transform: translate, описанный здесь (https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/) центрировать ребенка. Оба метода сработали, но привели к странному поведению прокрутки, когда родитель становится слишком маленьким

#wrapper {
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
position: absolute;
}

.center {
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}

Вот jsfiddle, который показывает, что я имею в виду:http://jsfiddle.net/snhpdL91/

Обратите внимание, что если вы уменьшите размер окна до появления полос прокрутки, текст «привет» в верхней части дочернего элемента будет обрезан, даже если прокрутить до самого верха. Как я могу сделать так, чтобы я мог прокручивать весь диапазон дочернего элемента?