CSS中居中對齊是很常見的樣式需求。常見的元素可以使用text-align:center來實現,但如果是多行文本或者是元素的寬度不確定時,就需要使用其他的方法。
/* 水平居中 */ .element { position: relative; } .element-child { position: absolute; left: 50%; transform: translateX(-50%); } /* 垂直居中 */ .parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); } /* 水平垂直居中 */ .parent { display: flex; justify-content: center; align-items: center; } .child { width: 100px; height: 100px; } /* 文字水平垂直居中 */ .text { display: flex; justify-content: center; align-items: center; text-align: center; height: 100px; }
以上代碼演示了三種不同的中心對齊方式:水平居中、垂直居中和水平垂直居中。此外還有一個文字水平垂直居中的例子,它適用于只有文本的情況,使用display:flex實現。
總結:在CSS中實現中心對齊有很多方法,可以根據實際情況選擇適合的方式。使用position:absolute、display:flex等方法都可以實現中心對齊。