|
针对前端来讲，用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%;
| 
发表于 2024-6-30 05:22:15
