任务一：写出所有垂直居中布局的方式。

Mopecat commented 4 years ago

来吧开始吧我的小伙伴们

LB-nan commented 4 years ago

绝对定位 + margin负值
绝对定位 + transform：translate
position: absolute; top: 0;bottom: 0;margin: auto;
使用padding
flex布局
display: table; + display: table-cell;vertical-align: middle;

Mopecat commented 4 years ago

写了一个小练习做的相关实践，代码主要可以分成几种情况：

比较万能的flex，可以在不确定父子宽高的情况实现，唯一缺点是兼容性不好。
已知父元素和子元素宽高的情况可以计算父元素的padding值（局限性较大）
已知子元素宽高，可以用绝对定位+margin负值
已知子元素宽高的情况下还可以用绝对定位 + calc(50% - child宽高)来实现。有个需要注意的点就是在calc方法里的操作符（也就是加减乘除符号）的前后必须要有空格，否则不生效。
不确定子元素宽高，可以用绝对定位 + transform:translate(-50%，-50%)(原理是当translate的参数值为百分比的时候偏移量是根据自身宽高计算的)
不确定父子宽， display: table-cell;vertical-align:middle; 但是这种方式除了本身兼容性不好之外，还附带有表格的样式，需要大量代码清除样式，实用性并不高
不确定父子宽高还可以用绝对定位上下左右为0 +margin:auto 实现

HHardyy commented 4 years ago

grid

Mopecat commented 4 years ago

grid

回头我试试，这玩意我还没用过呢

zengkaiz commented 4 years ago

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST</title>
    <style>
       .wrap {
           width: 500px;
           height: 500px;
           background: green;
           /* NO.1 */
           /* display: flex;
           align-items: center;
           justify-content: center; */
           /* NO.2 */
           /* padding:150px;
           box-sizing: border-box; */
           /* No.3 */
           position: relative;
       }
       .inner {
            width:200px;
            height: 200px;
           background: red;
           /* No.3 */
           /* position: absolute;
           top: 50%;
           left:50%;
           margin-top: -100px;
           margin-left: -100px; */
           /* No.4 */
           /* position: absolute;
           top: 50%;
           left:50%;
           transform: translate(-50%, -50%); */
           /* NO.5 */
           position: absolute;
           top:0;
           left:0;
           right: 0;
           bottom:0;
           margin: auto;
       }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="inner"></div>
    </div>
</body>
<script src="./2.index.js"></script>
</html>

Mopecat / Daily-Mission-Board

任务一：写出所有垂直居中布局的方式。 #1