CSS是前端開發中必不可少的一部分。在設計網頁時，很多時候我們需要讓某個元素居中顯示，比如圖片、文字、按鈕等等。下面介紹幾種常見的居中方法。

水平居中

/* 文字水平居中 */
.text{
text-align: center;
}
/* 塊級元素水平居中（需設置寬度） */
.block{
width: 200px;
margin: 0 auto;
}
/* 絕對定位元素水平居中（需知道父元素寬度） */
.absolute{
width: 100px;
position: absolute;
left: 50%;
margin-left: -50px;
}

垂直居中

垂直居中比水平居中稍微麻煩一些。下面介紹幾種垂直居中的方法。

行高居中

/* 單行文本垂直居中 */
.text{
line-height: 50px; /* 與容器高度相等 */
}
/* 多行文本垂直居中 */
.text{
height: 100px; /* 容器高度 */
line-height: 100px; /* 與容器高度相等 */
}

絕對定位居中

/* 絕對定位元素垂直居中（需知道父元素高度） */
.absolute{
height: 50px;
position: absolute;
top: 50%;
margin-top: -25px; /* 元素高度的一半 */
}

Flex布局居中

Flex布局能夠輕松地實現水平居中和垂直居中，只需在父元素上添加display: flex; 和 align-items: center; 或 justify-content: center; 就可以實現了。

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

CSS居中對于頁面的美觀度和易讀性都有著重要的作用。希望本篇文章能為大家提供一些幫助。