CSS元素樣式中的居中方法是頁面布局中非常重要的一部分。下面我們就來介紹一些實現元素居中的樣式方法。

1. 水平居中
/*對于塊狀元素*/
.center{
width: 50%;
margin: 0 auto;
}
/*對于行內元素*/
.parent{
text-align: center;
}
.child{
display: inline-block;
}
2. 垂直居中
/*對于單行文本*/
.parent{
height: 200px;
line-height: 200px;
text-align: center;
}
/*對于多行文本*/
.parent{
display: flex;
align-items: center;
}
.child{
margin: auto;
}
/*在容器中垂直居中（定位）*/
.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
3. 水平垂直居中
/*依賴定位屬性*/
.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*依賴Flex布局（適用于不知道元素大小）*/
.parent{
display: flex;
justify-content: center;
align-items: center;
}
/*方案三：彈性盒子*/
.parent{
display: flex;
}
.child{
margin: auto;
}

以上就是CSS元素居中樣式的方法介紹，希望對你的網頁布局有所幫助。