css居中问题

一、文本的水平垂直居中

    a、单行文本的水平垂直居中

     text-align：center;

     line-height:xx(height值);

    b、多行文本的水平垂直居中

      text-align:center;

      line-height:xx(height值/行数);

      vertical-align:middle;

 

二、盒模型的水平垂直居中，主要是通过计算设置margin和padding值来解决

     a、padding填充模式

         margin：0 auto;

         padding: (@wrapWidth - @contentWidth) / 2;

        （注意：background-clip属性的使用）

     b、margin填充模式

         margin-top: (@wrapWidth - @contentWidth) / 2  auto;

        （注意：子元素的margin值改变了，父元素的top值也会改变，所以需要给父元素添加一个overflow:hidden;）

     calc()的用法：margin/padding: calc(~"(100%-100px)/2");

 

三、absolute来实现居中

     定义父元素的position，让子元素的position为absolute，然后定义left和top值来定位（或者通过设置margin值来定位）

     这种定位方法子元素会完全跳出文档流。

四、float的布局模式

     让当前元素浮动跳出文档流，通过left、right、top、bottom值进行定位，

五、bfc的布局模式

六、ifc的布局模式

 

转载于:https://www.cnblogs.com/bky-1/p/5080312.html