CSS中實現垂直居中一直是一個令人頭痛的問題,下面提供幾種完美實現垂直居中的方法:
/* 方法一:使用flex布局 */ .container { display: flex; align-items: center; justify-content: center; } /* 方法二:使用絕對定位和top、left、translate屬性 */ .container { position: relative; } .item { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* 方法三:使用table布局 */ .container { display: table; } .item { display: table-cell; vertical-align: middle; } /* 方法四:使用grid布局 */ .container { display: grid; place-items: center; } /* 方法五:使用line-height屬性 */ .container { height: 100px; line-height: 100px; } .item { display: inline-block; vertical-align: middle; }
通過以上幾種方法,我們可以實現各種場景下的垂直居中。同時需要注意的是,在實際應用中,我們需要根據實際情況靈活選擇。
下一篇css定義body長寬