SOURCE

<!-- 怎么一个元素垂直水平居中 start -->

<div class="center-box">
    <div class="center">
        <p>子元素</p>
        <p>不知道自己多宽多高</p>
    </div>
</div>

<!-- 怎么一个元素垂直水平居中 end -->

<br>
<br>

<!-- 怎么实现一个梯形 start -->

<div class="trapezoidal-one"></div>
<div class="trapezoidal-two"></div>

<!-- 怎么实现一个梯形 end -->

/* 怎么一个元素垂直水平居中 start */

.center-box {
    height: 200px;
    background-color: rebeccapurple;
}

.center {
    display: inline-block;
    background-color: red;
}


/* 
    当将 margin 的单位设置为 % 的时候，
    是相对于父元素的宽度而言的，不管是上下还是左右
*/


/* margin: 50% auto auto 50%; */


/* 第一种方式 flex */

/* .center-box {
    display: flex;
    justify-content: center;
    align-items: center;
} */


/* 第二种方式 position + transform */

/* .center-box { position: relative;}
.center {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
} */


/* 第三种方式 position + margin 必须知道目标元素的宽高 */
.center-box { position: relative;}
.center {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-72px, -46px);
}

/* 第四种方式 grid */

/* 怎么一个元素垂直水平居中 end */


/* 怎么实现一个梯形 start */
/* 
    思路：
        利用 border 来实现
*/

.trapezoidal-one {
    width: 90px;
    height: 0px;

    border-top: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid rebeccapurple;
    border-left: 30px solid transparent;
}

.trapezoidal-two {
    width: 90px;
    height: 0px;

    border-top: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid rebeccapurple;
    border-left: 0px solid transparent;
}

/* 怎么实现一个梯形 end */