怎么用css實現水平垂直絕對居中？ - css筆記

在使用CSS進行網頁布局時，我們常常需要讓某個div塊或是文本水平垂直絕對居中，那么，都有哪些方法呢？這一次的css筆記分享下怎么用css實現水平垂直絕對居中。

• 參考壹：CSDN
• 參考貳：知乎
• 參考叁：掘金

第壹種：?

伸縮盒子，要定義在父類

.father-box {
    display: flex;
    justify-content: center; /*水平居中*/
    align-items: center;/*垂直居中*/
}

第貳種：

若父容器下只有一個元素，且父元素設置了高度，則只需要使用相對定位即可

.father-box {
	height:200px;
}
.son-box {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}

第叁種：

Flex 布局

.father-box {
    display:flex;/*Flex布局*/
    display: -webkit-flex; /* Safari */
    align-items:center;/*指定垂直居中*/
}
.son-box {
	text-align: center;
}

第肆種：

.father-box {
	position: relative;
	width: 800px;
	height: 300px;
}
.son-box {
	position: absolute;
	top: 50%;
        transform: translate(0, -50%);
	width: 100%;
        text-align: center;
}

比較專業的（推薦）：

怎么居中？ - CSS筆記

Muze

• 20年5月29日
• 喜歡：0
• 瀏覽：262