CSS中垂直對齊是網頁布局中常用的技巧,可以讓頁面元素在水平方向對齊的同時,也實現了垂直方向的對齊。以下介紹CSS中實現垂直對齊的幾種方法。
.vertical-align { display: table-cell; vertical-align: middle; }
1. display: table-cell + vertical-align
使用display屬性將元素設為table-cell,再使用vertical-align屬性就可以實現垂直居中對齊。此方法需要在父元素上設置display為table或table-row。
.parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }
2. position: absolute + top + translate
將子元素設為position: absolute,再使用top屬性和transform: translateY(-50%)就可以實現垂直居中對齊。注意,此方法需要在父元素上設置position為relative。
.parent { display: flex; justify-content: center; align-items: center; }
3. display: flex + justify-content + align-items
使用display: flex將父元素設為彈性容器,再使用justify-content屬性和align-items屬性就可以實現水平和垂直方向的居中對齊。
以上是實現垂直居中對齊的幾種方法,使用它們可以讓我們更好地控制網頁布局,提高網頁的美觀度和可讀性。
上一篇PHP hdfs日志