CSS讓內容上下左右居中

在Web頁面中，我們常常需要讓內容居中顯示，這時CSS就是我們的好幫手。下面介紹幾種常見的實現方式。
1. 水平居中
將要居中的內容包裹在一個塊級元素中，給它設置一個寬度，然后將margin-left和margin-right設為auto即可實現水平居中。
代碼如下：
.wrapper {
width: 600px;
margin: 0 auto;
}
2. 垂直居中
垂直居中需要使用相對定位和負margin。將要居中的內容包裹在一個塊級元素中，給它設置一個高度，然后將它的position屬性設為relative，再將它里面的內容用絕對定位。此時，再將內容的top和bottom都設為0，即可實現垂直居中。
代碼如下：
.wrapper {
position: relative;
height: 400px;
}
.content {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
3. 水平垂直居中
水平垂直居中需要使用絕對定位和transform。將要居中的內容包裹在一個塊級元素中，給它設置一個高度和寬度，然后將它的position屬性設為absolute，再將它里面的內容用絕對定位。此時，再將內容的top、bottom、left、right都設為0，再用transform將內容向中心平移即可實現水平垂直居中。
代碼如下：
.wrapper {
position: relative;
height: 400px;
}
.content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
transform: translate(0, 50%);
}