垂直居中

方法一:

利用table的自帶功能

table

方法二:100%高度的before和after + display:inline-block


垂直居中

方法三:偽裝成table


垂直居中

方法四:利用margin-top:-150px;


垂直居中

方法五:利用translate


垂直居中

方法六:利用margin:auto


垂直居中

方法七:利用flex 布局


垂直居中
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,786評論 1 92
  • 垂直居中是一個老話題,我總結一下我所遇到的垂直居中方法,歡迎大家更正補充。 單行文本 相信大家對單行文本垂直居...
    米幾V閱讀 811評論 0 7
  • 垂直居中 .parent > .child .parent 定高 .child 高度不確定,垂直居中 要點1 不要...
    曾祥輝閱讀 797評論 0 0
  • 閩江之畔,音樂與暢想相伴。江水忽而升起,水漲落之間,心也跟著起伏。遇到,一片月光,投下一片影子,瀟灑地跟著旋律轉動...
    蔚遇晴嵐閱讀 319評論 0 0
  • 我記得那一天, 你說了再見, 等你走遠了, 我才回頭。 其實, 我不是那么傷感的人。 只是, 一個人的時候, 總會...
    蕭天閱讀 284評論 0 0