内容居中(主要是垂直居中)

Posted 2020-10-31 looklu

水平上居中的方法比较多如设置margin:0 atuo等,一般垂直居中比较麻烦

利用定位水平、垂直居中
/*第一种*/
　　position: absolute;
　　top: 0;
　　right: 0;
　　bottom: 0;
　　left: 0;
　　margin: auto;
此种方法适用于不确定盒子的高度以及自身高度的情况.
父级需设置position:absolute或result.

/*第二种*/

parentElement{
        position:relative;
    }
 childElement{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);

 }

/*第三种*/
　　postion: absolute;
　　top: 50%;
　　left: 50%;
　　margin-left: -width/2;(自身宽度一半)
　　margin-top: -height/2;(自身高度一半)

在不使用定位时,可以通过设置height和line-height相等,达到垂直居中
　　height: 40px;
　　line-height: 40px;
　　text-align; center;//水平居中

将行距增加到和整个盒子一样高,内容自然居中,无需设置vertical-align: middle.


display和vertical-align组合,达到水平居中

    display:table-cell;  /*将对象作为表格单元格显示 */

    vertical-align:middle;

其他,如设置flex等,也可以达到居中效果,想了解的同学可以自己去搜索.