javascript - 通过 css 使用 Padding 使子元素居中

Question

我使子元素水平流动，并希望通过使用 CSS 将它们保持在中心位置，我知道它们有很多方法可以仅通过使用 css 使其保持在中心位置，但我想使用填充来将子元素保持在中心位置窗口高度的中心，

为什么要填充:我在 IE-11 上工作，如果我通过应用使我的元素居中:

#mycontainer{ min-height:450px;top:20%;bottom:20%;} 

只有当鼠标悬停或焦点位于 #mycontainer 时才会滚动，

所以通过应用填充:

#mycontainer{ height:100%;padding:20% 0 20% 100px;}

我的滚动条在页面上的任何地方都有效，但这并不能使元素居中。

所以，现在我通过使用 jquery 实现了这一点:

var padding = ($(window).height() - content_height) / 2;

$('#mycontainer').css({ 'padding': (padding+'px') + ' 0 ' + (padding+'px') + ' 100px' });

仅使用 CSS 是否可行？

Here is my Fiddle

Answer 1

你可以使用 display:flex 来做到这一点:http://codepen.io/anon/pen/xjGBF/

或显示:表格 http://jsfiddle.net/MxE8Y/2/ (包括 IE8)