css垂直居中的方式

u1jodi1q

针对前端来讲，用CSS实现垂直居中是平常的工作，但自从flex显现后，由于做的差不多都是移动端的页面，大众基本上都用flex了。为了方便大众写PC端样式时能够少走弯路，我把之前工作中用到过的和别人总结的垂直居中方式一并总结在这儿。

基本的DOM结构如下：

``` js <div class="parent"> <div id="child"></div> </div> ```

margin-top / padding-top

示例

``` js .parent { width: 300px; height: 300px; } .child { width: 100px; height: 100px; margin-top: 50px; }

---- 或 ---- .parent { width: 300px; height: 300px; padding-top: 50px; box-sizing: border-box; } .child { width: 100px; height: 100px; }

```

兼容性

本来我是不打算写这种方式的，但笨办法亦是一种办法。

flex

示例 js .parent { display: flex; height: 300px; align-items: center; } .child { width: 100px; height: 100px; }兼容性

flex在移动端的兼容性都很好，然则倘若要在PC端运用的话，IE 10 以下就不要思虑了，IE 10 和11 亦有有些兼容性问题必须重视：flex兼容性。

绝对定位 + transform

示例

``` js .parent { position: relative; height: 300px; } .child { width: 100px; height: 100px; position: absolute; top: 50%;

jxwysz

同意、说得对、没错、我也是这么想的等。

星☆雨

大势所趋，用于讽刺一些制作目的就是为了跟风玩梗，博取眼球的作品。