CSS 實現垂直居中的幾種方案

2022-08-28 21:54:34 字數 521 閱讀 5768

最近在學關係型資料庫相關,mysql 和 postgre,捎帶著學了 php,為了練手這幾天就忙著自己搭部落格,專案部署在某雲上,該雲算是良心,給的空間自己搭部落格用足夠了。本來想著每日一bo的,所以有的時候實在來不及就只能隔天更新了。以後盡量發點東西出來,等部落格搭完寫一寫 sql 資料庫基礎相關的分享,給跟我一樣的小白道友們做下參考,大神請直接無視~

說到居中,很多人第一反應應該是水平居中,說到水平居中,肯定道友們有一萬種方法做到,css3 的flexbox更是強大到沒朋友。但是良辰今天想聊的是 css 垂直居中的方法,下面是萌萌的分割線。神馬?你敢說不萌?

分析就這樣,我們實現了垂直和水平的居中

上面提到的方法,都有侷限性,下面介紹一種通用的方法,不過是 css3實現的,但是通用。

justify-content:center;//子元素水平居中align-items:center;//子元素垂直居中display:-webkit-flex;

就先寫這麼多吧,先吃飯去啦~

CSS 垂直居中的幾種方案

垂直居中是布局中十分常見的效果之一,為實現良好的相容性,pc端實現垂直居中的方法一般是通過絕對定位,table cell,負邊距等方法。有了css3,針對移動端的垂直居中就更加多樣化。方法1 table cell html結構 垂直居中 方法2 display flex box2 方法3 絕對定位和...

幾種CSS實現元素垂直居中的方式

最近在專案中又用到了元素的垂直居中,在這裡整理總結一下可以實現元素垂直居中的幾種方法。方法1 利用line height實現單行元素的垂直居中。實現方法 將行內文字的line height設定為父級元素的高度 文字垂直居中 方法2 父級設定display table,子元素 display tabl...

CSS實現垂直水平居中的幾種方式

container是指外邊大盒子,center是指需要居中的小盒子,第一種方式 container寬高已知和container高已知的情況下 第一種 container center container寬高已知 直接通過最簡單的margin,先讓他右移container的一半,再左移自己的一半,垂直...