css 塊級元素 行級元素居中

行內元素 display:inline-block 給定寬高後居中

text-align: center; /*  文字 行內元素 行內塊元素水平居中 */

塊級元素居中

margin: 10px auto;  /* 塊級盒子水平居中  左右margin 改爲 auto  */

圖片和文字居中

 img {
    vertical-align: middle;/*  設置圖片和文字對齊的基線 */
}

vertical-align 是對齊居中的意思，同一父元素下，一個元素相對另一個居中

    .box1::after {
            content: "";
            display: inline-block;
            height: 100%;
            width: 0px;
            vertical-align: middle;
        }
    /*增加上這個僞元素，即可讓box2基於box1居中，box1又是100%高，因此再父容器中居中 *\
	.box2 {
            display: inline-block;
            vertical-align: middle;
            width: 100px;
            height: 50px;
        }

文字居中 高和行高相同

    height: 42px;
    line-height: 42px;/*  水平方向居中 */
    text-align: center;/*  豎直方向居中 */

flex水平 垂直居中

display: flex;
align-items: center; /*定義body的元素垂直居中*/
justify-content: center; /*定義body的裏的元素水平居中*/