當我們在編寫網頁時，常常要讓元素居中對齊，這個時候CSS樣式就非常方便了！下面介紹一些常用的居中對齊方法。

1. 水平居中對齊：

<style>
.center {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
<div class="center">
<h1>我要居中</h1>
</div>

上述代碼的作用是：將class為center的元素絕對定位，并使其左側距離父元素左側為50%的位置，然后通過translateX(-50%)將其向左移動50%，實現(xiàn)水平居中對齊。

2. 垂直居中對齊：

<style>
.center {
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<div class="center">
<h1>我要居中</h1>
</div>

上述代碼的作用是：將class為center的元素高度定為200px，并通過display: flex將其轉化為彈性盒子，然后使用justify-content: center和align-items: center實現(xiàn)水平和垂直兩個方向的居中對齊。

3. 水平垂直居中對齊：

<style>
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="center">
<h1>我要居中</h1>
</div>

上述代碼的作用是：將class為center的元素絕對定位，并使其左側距離父元素左側和上側距離父元素上側為50%的位置，然后通過translate(-50%, -50%)將其同時向左和向上移動50%，實現(xiàn)水平垂直居中對齊。

以上就是CSS樣式居中對齊的幾種方法，希望對大家有所幫助！