css居中的方法

如何垂直居中一个元素？

1.1）若该元素是文本、图片等内联元素时，水平居中是通过给父元素设置text-align:center来实现的。

#parent{text-align: center;}.son{display: inline-block;} /*改为行内或者行内块级形式，以达到text-align对其生效*/

1.2）若该元素是块状元素，又分为定宽块状元素和不定宽块状元素。

   1.2.1）定宽块状元素

       设置左右margin值为auto来实现居中的。

       要实现水平垂直居中，可以设置父元素position: relative，子元素position: absolute; left: 50%; top: 50%; margin-left: -50px;margin-top: -50px;

   1.2.2）不定宽块状元素

       方法一：父容器设置display: flex; justify-content: center;align-items: center;

       方法二：设置父元素position: relative，子元素position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);

方法一：

update为父容器

flexbox为子容器

. update {

margin-top: 20px;

position: relative;

}

. flexbox {

position: absolute;

left: 50%;

transform: translate( -50%, 0);

}

方法二：弹性盒子

main为父容器

. main {

display: flex;

margin-top: 20px;

justify-content: center;

}

如何垂直居中一个元素？

单行文本/行内/行内块级

#parent{

height: 150px;

line-height: 150px; /*与height等值*／

}

#parent{position: relative;}

#son{

position: absolute;

top: 50%;

left: 50%;

/*定宽高时等同于margin-left:负自身宽度一半;margin-top:负自身高度一半;*/

transform: translate(-50%,-50%);

}

#parent{

display: flex;

}

#son{

margin: auto;

}

或

#parent{

display: flex;

justify-content: center;

align-items: center;

}

或

#parent{

display: flex;

justify-content:center;

}

#son{align-self: center;}