搜尋

首頁  >  問答  >  主體

css3 - CSS关于垂直居中,大家有没有什么比较好的建议。

题主目前在工作中经常遇到这种问题。
例如:在高度固定的时候如果文本是一行的话,垂直居中,如果两行的话也是垂直居中,当第三行的时候就隐藏(如果有‘...’的话当然最好)。有没有简单而有效的方法?
谢谢,么么哒。

怪我咯怪我咯2866 天前1054

全部回覆(13)我來回復

  • 大家讲道理

    大家讲道理2017-04-17 11:36:36

    自行百度了許久,找了很多資料
    這篇博客講的挺詳細的
    http://www.cnblogs.com/dojo-lzz/p/4419596.html
    其中講了7種方法,flex講的略簡單,flex可以參考可以參考阮一峰的部落格
    一、文法篇:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html ;
    二、實例篇:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html;


    2016.01.31
    看到好多小夥伴關注了這個問題,我就寫了一篇總結:
    sf專欄文章:http://segmentfault.com/a/1190000004394432?_ea=593187;

    回覆
    0
  • PHP中文网

    PHP中文网2017-04-17 11:36:36

    老生常談的話題啦 centering in CSS

    回覆
    0
  • 黄舟

    黄舟2017-04-17 11:36:36

    用js計算寫top值

    回覆
    0
  • 迷茫

    迷茫2017-04-17 11:36:36

    這個使用flex佈局來解決比較容易,推薦看下阮一峰老師的博客,講的很細緻http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

    回覆
    0
  • 阿神

    阿神2017-04-17 11:36:36

    http://zhuxinyong.com/2015/03/02/%E6%B0%B8%E6%81%92%E7%9A%84%E6%B0%B4%E5%B9%B3%E5% 9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/

    我自己寫的,參考下吧!

    回覆
    0
  • 天蓬老师

    天蓬老师2017-04-17 11:36:36

    使用flex

    回覆
    0
  • PHPz

    PHPz2017-04-17 11:36:36

    css垂直居中就那幾種方法。
    像我怕麻煩的都直接用js來居中。
    但最好的還是flex,其次是用talbe居中,然後是position+transform。這三種應該都是可變高度的。

    回覆
    0
  • PHP中文网

    PHP中文网2017-04-17 11:36:36

    https://www.qianduan.net/css-to-achieve-the-vertical-center-of-the- 五種方法/

    回覆
    0
  • PHPz

    PHPz2017-04-17 11:36:36

    inline-block和絕對居中兩種方式是最常用的

    回覆
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-17 11:36:36

    推薦使用flex,新的版面趨勢
    建議閱讀阮一峰老師的Blog
    貼上地址,圖文並茂,適合剛接觸flex的同學閱讀
    http://www.ruanyifeng.com/ blog/2015/07/flex-grammar.html
    http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

    回覆
    0
  • 取消回覆