CSS居中對于不少初學者來說是一個比較棘手的問題。在這篇文章中，我們將會詳細介紹如何在CSS中實現居中布局。以下是不同情況下的居中方案：

一、水平居中

1、行內元素

父元素 text-align: center;
子元素 display: inline-block; (默認寬高為內容寬高)

2、塊級元素

父元素 text-align: center;
子元素 margin: 0 auto; (不建議使用margin-left和margin-right)
或者
父元素 display: flex;
justify-content: center;

二、垂直居中

1、單行文本垂直居中

父元素 line-height: 父元素高度;

2、多行文本垂直居中

父元素 display: table-cell;
vertical-align: middle;

3、絕對定位元素垂直居中

父元素 position: relative;
子元素 position: absolute; top: 50%; transform: translateY(-50%);

三、水平垂直居中

1、已知寬高元素水平垂直居中

父元素 position: relative;
子元素 position: absolute; top: 50%; left: 50%;
margin-top: 子元素高度的一半; margin-left: 子元素寬度的一半;

2、未知寬高元素水平垂直居中

父元素 position: relative;
子元素 position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);

3、flex布局水平垂直居中

父元素 display: flex;
align-items: center;
justify-content: center;

總結：

以上是CSS實現居中布局的常見方法，不同的元素和情況可能需要使用不同的居中方式。對于初學者來說，可以先根據需要選擇一個最簡單易懂的方法進行實現，日后在實踐中再逐漸掌握更多的居中技巧。