在網頁設計中，居中對齊元素是非常常見的需求。CSS提供了多種方法實現在水平和垂直方向上居中。
一、水平居中
1、居中塊級元素
將塊級元素設為寬度固定的寬度，然后將左右margin設置為auto。
例如：將div居中。
pre {
background-color: #f4f4f4;
padding: 10px;
}
p {
text-align: center;
}
div {
width: 200px;
margin: 0 auto;
}2、居中行內元素
將行內元素的父元素設為text-align:center。
例如：將span居中。div {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
2、flex布局
使用flex布局的align-items和justify-content屬性，可以輕松實現元素水平和垂直方向上的居中。
例如：將div居中。pre {
background-color: #f4f4f4;
padding: 10px;
}
p {
margin: 0;
}
div {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
以上幾種方式只是CSS實現居中的方法之一。在不同的場景下，還有其他方法可以實現元素的居中對齊，可以根據實際情況選擇最適合的方法。
Hello, world!
Hello, world!
div {
text-align: center;
}
span {
background-color: #f4f4f4;
padding: 10px;
}
二、水平和垂直居中
1、絕對定位+負邊距
該方法需要將需要居中的元素設置為絕對定位，然后通過設置左右和上下的margin為負值實現居中。
例如：將div居中。Hello, world!
Hello, world!