CSS塊在塊居中是前端開發中最基本、最常用的技巧之一。相信大家都遇到過這樣的需求：如何將一個塊元素在頁面中水平、垂直居中？

在CSS中，我們通常使用以下兩種方法實現：

代碼1：
.container {
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
代碼2：
.container {
display: flex;
justify-content: center;
align-items: center;
}

第一種方法比較傳統，使用position與transform來定位元素。首先將元素position屬性值設為absolute，然后將top和left屬性值設為50%。這樣就將元素定位到了視口的中心，但此時元素的左上角并不在視口的中心位置，所以還需要使用transform來向左上方移動該元素的一半寬度和高度，這里使用translate()函數可以快速、方便地實現。

第二種方法使用CSS3新增的Flexbox（彈性盒模型），可以簡單、靈活地控制塊的排列方式。使用display: flex來將容器設為一個Flex容器，然后使用justify-content和align-items屬性來控制Flex容器的主軸對齊方式和交叉軸對齊方式，從而實現元素在Flex容器中的居中排列。