元素垂直居中的方法

 

 

文章目录：

     一、元素垂直居中的设置方法

     二、相关代码的实现

 

元素垂直居中的设置方法：

1、设置子元素和父元素的行高一样

2、子元素设置为行内块，再加vertical-alihn:middle;

3、已知父元素高度，子元素相对定位，通过transform:translateY(-50%);

4、不知道父元素的高度，子绝父相，子元素：top:50%;transform:translate(-50%);

5、创建一个隐藏的节点，让隐藏节点的height为剩余高度的一半

6、给父元素display:table，子元素display:table-cell; vertical-align:center;

7、给父元素添加伪元素

8、弹性盒，父元素：display:flex; 子元素：align-self:center;

 

相关代码的实现：

(1)绝对定位+margin负值

<style>
    .parent{

        width:400px;
        height:400px;
        margin:100px auto auto