CSS居中技巧总结

先一笔带过最基本的:

水平居中:

block元素:margin: auto;
inline元素:text-align: center;

img可以用display block后当作block元素处理

垂直居中:

上下给相同的padding

处理垂直居中的技巧:

  • 使用相同的height和line-height。
    如果单行文字:

    line-height - height;

    如果有多行文字:

    外层元素 
    line-height = height;
    内层元素  
    vertical-align: middle;
    display: inline-block;
  • 使用position和transform:
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    当然前提是parent元素要有position: relative;

参考:http://www.w3schools.com/css/css_align.asp

https://css-tricks.com/centering-css-complete-guide/ 还有更多的方法,不过我觉得有了以上这些已经够用了。

Leave a Reply