垂直居中

方法一：

利用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