居中是網頁布局中非常常用的樣式，如何設置居中的樣式？下面我們就來詳細介紹一下css樣式的居中設置。

一、水平居中

{
text-align: center;
}

通過設置text-align為center可以實現水平居中的效果。

二、垂直居中

{
display: flex;
justify-content: center;
align-items: center;
}

上述代碼可以讓一個塊級元素垂直水平居中。這里的display: flex是為了使用flex技術來實現水平垂直居中。然后通過設置justify-content: center和align-items: center來實現垂直居中的效果。

三、絕對定位居中

.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

上述代碼可以讓一個絕對定位的元素居中顯示。通過設置position為absolute，再通過top和left來將元素定位到容器的中心位置。然后通過transform: translate(-50%, -50%)來將元素的左上角坐標向左移和向上移動元素自身寬高的一半，從而實現居中顯示的效果。

總結：

以上就是css樣式的居中設置方法，通過text-align、flex、translate等方式都可以實現不同的居中效果。網頁布局中居中樣式的使用非常的廣泛，可以讓頁面的排版更加美觀、舒適。