CSS中有一種非常常用的居中定位方式——position: absolute + top: 50% + left: 50% + transform: translate(-50%, -50%)，簡稱：pos居中定位。
使用pos居中定位可以輕松實現(xiàn)任何元素的水平和垂直居中，不管是文字、圖片還是盒模型等。下面是具體的用法：
在CSS中定義需要居中的元素的父元素的位置屬性為：position: relative；
將需要居中的元素的位置屬性設(shè)置為：position: absolute；
使用top: 50% 實現(xiàn)元素垂直居中；
使用left: 50% 實現(xiàn)元素水平居中；
使用transform: translate(-50%, -50%) 讓元素向左和向上偏移自身一半的寬度和高度，從而實現(xiàn)完美居中。
下面我們來看一個實際例子：在上面的代碼中，我們定義了一個名為“container”的div標簽作為包容層，然后定義了一個名為“box”的div標簽作為需要居中的元素，并設(shè)置了pos居中定位的代碼。最后，我們可以看到，box元素已經(jīng)完美居中于container中間位置。
總的來說，CSS中pos居中定位是一種非常高效的元素居中方式，可以讓我們方便、快速、準確地實現(xiàn)各種元素的居中效果。在實際應用中，您可以隨意調(diào)整各個參數(shù)的數(shù)值，來達到您想要的效果。
示例代碼：
.container {
position: relative;
width: 200px;
height: 200px;
background-color: #ccc;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #f00;
}示例展示：
居中元素