CSS 居中 定位垂直居中 在網頁設計中，居中和垂直居中是很常見的操作，本文將介紹如何使用 CSS 實現居中和垂直居中。 一、水平居中 水平居中可以使用 margin 屬性實現。首先需要給要居中的元素設置寬度，然后將左右的 margin 設置為 auto 即可實現居中。 代碼如下：

p {
width: 200px; /* 元素寬度 */
margin: 0 auto; /* 左右 margin 設置為 auto */
}

二、定位居中 定位居中可以通過設置元素的 position 為 absolute，再設置 top、bottom、left、right 的值均為 0，然后再將 margin 設置為 auto 即可實現定位居中。 代碼如下：

.parent {
position: relative; /* 父元素設置為 relative */
}
.child {
position: absolute; /* 子元素設置為 absolute */
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto; /* 居中 */
}

三、垂直居中 在沒有設置高度的情況下，垂直居中可以通過設置父元素和子元素為 flex 布局，然后使用 align-items 和 justify-content 屬性實現垂直居中。 代碼如下：

.parent {
display: flex; /* 父元素設置為 flex 布局 */
align-items: center; /* 垂直居中 */
}
.child {
/* no style needed */
}

如果設置了高度，垂直居中可以通過設置子元素的 margin-top 和 margin-bottom 的值為 auto，然后將父元素的 height 設置為固定值。 代碼如下：

.parent {
height: 300px;
}
.child {
height: 100px; /* 子元素高度 */
margin: auto 0; /* 上下 margin 設置為 auto */
}

總結 以上就是 CSS 實現居中和垂直居中的幾種方法，需要根據實際情況選擇不同的方法。希望對網頁設計有所幫助！