網站制作絕對定位和inline-block的垂直居中對齊

2024-03-27 分類：網站建設

在網站頁面制作的時候，很多會遇到需要做垂直居中的效果，而能做到垂直居中的效果的方式有好多種，今天我想做的這兩種，也非常常用，都可以用于響應式的。例如：

如圖，白色方塊需要根據底圖垂直居中，可以用絕對定位來使它居中，首先最外面的div.comp-profile需要設置position: relative;白色方塊的div.comp-profile-con設置如下，白色方塊即可垂直居中對齊。而且絕對定位必須要設置高度，而且建議設置overflow:auto，讓div.comp-profile-con的內容超出設定的高度就要顯示有滾動條，否則內容多了就會超出來，不美觀。
第二種方式是使用inline-block，這種方式的垂直居中是可以變高度且可以適用于響應式的。將需要居中的div.comp-profile-con設置display: inline-block;變成行內塊狀元素，然后設置vertical-align:middle;來讓它居中對齊。設置偽元素：before如下，用于撐開div.comp-profile這個盒子，div.comp-profile-con就會按照div.comp-profile的中心位置垂直居中對齊。如圖。

以上就是關于網站制作絕對定位和inline-block的垂直居中對齊，希望對你有幫助，更多內容關注創新互聯。

文章名稱：網站制作絕對定位和inline-block的垂直居中對齊
文章出自：http://m.kartarina.com/news42/321992.html

成都網站建設公司_創新互聯，為您提供品牌網站制作、網站導航、域名注冊、網站建設、企業網站制作、微信公眾號

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容