元素居中顯示
-
塊級元素居中顯示
-
在body中的某個元素(box1)
.box1 { margin: 0 auto; } -
通過絕對定位在父容器里居中垂直顯示
// 方法一： .box1 { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } // 方法二：(更加簡潔) .box1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } -
彈性盒模型（居中）
// 可以給box1的父級元素設定為flex .xxx { display: flex; justify-content: center; align-items: center }
-
-
文字實作居中顯示
-
水平居中
// 給父級塊元素設定 { text-align: center; } -
垂直居中
// 給父級塊元素設定 { height: 50px; line-height: 50px; }
-
有什么遺漏的或者錯誤的地方，請指正，共同學習、共同進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/210534.html
標籤：其他
上一篇：使用jQuery實作購物車