CSS中,實現內容垂直居中是比較常見的需求,特別是在網頁設計中。下面介紹幾種實現方式。
/*方法一*/ div{ display: flex; justify-content: center; align-items: center; } /*方法二*/ div{ position: absolute; top: 50%; transform: translateY(-50%); } /*方法三*/ div{ position: relative; } p{ position: absolute; top: 50%; transform: translateY(-50%); }
方法一是使用flex布局,將容器的justify-content和align-items都設置成center,就可以實現內容垂直居中。
方法二是使用position屬性,將容器設置成絕對定位,然后使用top和transform屬性,把容器的頂部移到頁面的中間位置,這樣就實現了垂直居中。
方法三是在容器中使用相對定位,然后將內容(例如p標簽)使用絕對定位,通過top和transform屬性實現垂直居中。
以上是幾種比較常見的實現內容垂直居中的方式,可以根據實際需求選擇合適的方法。
上一篇mysql 排序去重復
下一篇mysql 排序寫法