CSS居中是Web開發中經常用到的技巧,無論是文本、圖片或者是整個頁面,都需要考慮如何讓它們在頁面中居中。以下是幾種常用的CSS居中實現方案。
文本居中
.text-center { text-align: center; }
圖片居中
.image-center { display: block; margin: 0 auto; }
元素居中
對于寬度、高度已知的元素,可以通過以下代碼實現居中:
.element-center { position: absolute; top: 50%; left: 50%; margin-top: -(height/2)px; margin-left: -(width/2)px; }
對于寬度、高度未知的元素,可以通過以下代碼實現居中:
.element-center { position: relative; top: 50%; transform: translateY(-50%); }
頁面居中
對于整個頁面,可以通過以下代碼實現居中:
.page-center { display: flex; justify-content: center; }
以上是幾種常用的CSS居中實現方案,可以根據需要選擇適合的方法來實現居中效果。