在實現網頁布局時,經常會遇到需要對某個元素進行垂直居中的情況。下面介紹幾種CSS垂直居中的技巧。
/* 方法一:使用絕對定位和負邊距 */ .parent{ position: relative; /* 父元素設置相對定位 */ } .child{ position: absolute; /* 子元素設置絕對定位 */ top: 50%; /* 以父元素的頂部為基準線 */ transform: translateY(-50%); /* 上移50%的子元素高度 */ } /* 方法二:使用flex布局 */ .parent{ display: flex; /* 父元素設置為flex布局 */ align-items: center; /* 垂直居中 */ } /* 方法三:使用table布局 */ .parent{ display: table; /* 父元素設置為table布局 */ } .child{ display: table-cell; /* 子元素設置為table-cell */ vertical-align: middle; /* 垂直居中 */ }
以上三種方法都可以實現垂直居中,具體使用哪種方法根據實際情況而定。