用css實現垂直居中對象顯示是一個常見需求。可以使用多種方式實現,以下是幾種常見的方式。
方法1:table 父級元素設置display:table; 子元素設置display:table-cell; vertical-align:middle; 示例代碼: .parent{ display:table; } .child{ display:table-cell; vertical-align:middle; } 方法2:absolute + transform 父級元素設置position:relative; 子元素設置position:absolute; top:50%; transform:translateY(-50%); 示例代碼: .parent{ position:relative; } .child{ position:absolute; top:50%; transform:translateY(-50%); } 方法3:flexbox 父級元素設置display:flex; align-items:center; justify-content:center; 子元素不需要特殊設置。 示例代碼: .parent{ display:flex; align-items:center; justify-content:center; } 方法4:grid 父級元素設置display:grid; place-items:center; 子元素不需要特殊設置。 示例代碼: .parent{ display:grid; place-items:center; } 以上這幾種方法都可以實現垂直居中,選擇哪種方法取決于具體情況和個人喜好。
上一篇用css 邊框有質感
下一篇2個json拼接