H5居中CSS

在前端開發中，居中是一個非常常見的需求，特別是在H5頁面中。

居中有多種方式，下面介紹一些常用的方法。

水平居中

實現水平居中，可以使用text-align屬性和margin屬性。

代碼示例：
.center {
text-align: center; /* 讓所有子元素水平居中 */
}
.center-child {
display: inline-block; /* 必須要用塊級元素來做 */
margin: 0 auto; /* 水平方向上的 margin 自動分配 */
}

垂直居中

實現垂直居中有很多種方式，其中比較常用的是使用flexbox布局。

代碼示例：
.parent {
display: flex;
justify-content: center; /* 左右居中 */
align-items: center; /* 上下居中 */
}
.child {
width: 200px;
height: 200px;
}

水平垂直居中

實現水平垂直居中，可以將上述兩種方式結合使用。

代碼示例：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 將偽類移到位置中心 */
}

以上就是H5居中CSS的常用方法，大家可以根據實際需求選擇不同的方式進行實現。