元素垂直居中的方法

1、通过verticle-align:middle实现元素垂直居中,但元素的display必须是inline-block(这是最常用的方法)。

2、(用flex布局写)给元素的父元素设置display:flex;  justify-content:center为主轴方向居中,align-items:center为交叉轴方向居中(兼容性不交差,只能支持ie9以上版本)。

3、(添加伪元素:before)给父元素添加伪元素:before,使子元素实现垂直居中:

  #father:before{

    content;'';

    display:inline-block;

    varticla-align:middle;

    height:100%;

  }

4、(用display:table-cell写)给父元素设置display:table;子元素设置display:table-cell。

5、(创建隐藏节点)创建一个隐藏节点#hide,使隐藏节点的height值为剩余高度的一半(隐藏节点display为block)。

  #hide{

    width:大于0即可;

    height:剩余高度的一半;

  }

6、(用transform)给父元素设置position:relative,子元素设置position:absolute;top:50%;transform:translateY(50%),(这种方法兼容性不好,只支持IE9+的浏览器)。

7、(line-height)设置子元素的line-height值等于父元素的height,这种方法适用于子元素为单行文本的情况。

8、(用position定位)给子元素设置position:absolute;top:50%(设置元素的定位位置,距离上为50%);margin-top:负的元素高度的一半(这种方法兼容性很好,但不许知道元素的宽高)。

9、(设置元素的margin)给元素设置position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;(兼容性较好,但不支持ie7一下的浏览器)。

就先想到这么多,什么时候想起来再修改吧

猜你喜欢

转载自www.cnblogs.com/yh-Blogs/p/11428793.html