經常使用佈局

轉載：html上下佈局，上方高度固定，下方高度自動填滿

原地址連接

轉載：css實現兩個div並排等高

原地址連接

居中

// 會限定寬度
.mertailImgActive {
        width: auto;
        height: auto;
        max-height: 100%;
        max-width: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }
    
// 不限定寬度
    .boardItemCon {
        margin: auto;
        text-align: center;
        font-size: 3rem;
        color: white;
        max-height: 100%;
        max-width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        transform: translateY(-50%);
    }

不定寬div內圖片居中

<div style="font-size: 14px;color: #DDB975;" align="center">
     <img src="../../assets/images/stuActivity_un.png"/>
     <br/>學生活動頁
</div>