当前位置:Gxl网 > 互联网 > 内容居中(主要是垂直居中)

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

时间:2021-07-01 10:21:17 帮助过:2人阅读


水平上居中的方法比较多如设置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等,也可以达到居中效果,想了解的同学可以自己去搜索.