css 归纳

先确定要居中的元素：行内元素 、 块级元素

　　　行内元素：

　　　　　* 与其它元素并排

　　　　　* 不能设置宽、高，默认的宽高就是文字的宽高

　　　块级元素：

　　　　　* 单独占据一行

　　　　　* 可以设置宽高，不设置时则默认占据父元素100%

块级元素和行内元素的相互转换：

　　　display：inline;

　　　　那么这个标签将变为行内元素，即：

　　　　1，此时这个div将不能设置宽度和高度了。

　　　　2，此时这个div可以和其他行内元素并排了。

　　　display：block；

　　　　那么这个span标签将变为块级标签，即：

　　　　1，此时这个span能够设置宽度，高度。

　　　　2，此时这个span必须独占一行，其他元素无法与之并排。

　　　　3，如果不设置宽度，将占满父级

　　　display：inline-block；

　　　　不独占一行的块级元素

 

情况1：父元素没有固定高度时子元素垂直居中的方法

　　方法：使用padding实现垂直居中

　　注意事项: 去掉父级元素的height,子元素来撑起高度,利用这一点,加上padding手动设置内间距,达到垂直居中的效果

　　

 

情况2: 父元素有自己高度时, 单行文字想要居中

　　方法:  在子元素中设置line-height,与父元素高度相同即可

　　注意1:  子元素如果是p标签等有margin自带外边距的标签,需要将margin设置为0

　　注意2:  该方法只适合文字很少的情况,如果宽度超过父元素,文字就会跑出范围

　　

 

情况3:  父元素高度固定, 多行文字想要垂直居中

　　方法: 使用弹性布局 flex容器

　　注意1: flex-direction: column  垂直方向从上到下布局,  justify-content: center  对齐方式选择中间对齐

　　注意2: IE9以上才能兼容

　　

 

 情况4: 适用于整个导航栏中内容垂直居中

　　方法:  使用弹性布局 grid

　　注意:  浏览器兼容上不太好

　　

其它方法做垂直居中

　　1.  使用定位方式

　　　　优点: 简单易用 .    缺点: 元素脱离文档流

　　　　

 

　　2. 使用inline-block,  将行元素变为可以设置宽,高的块级元素,但仍保持不换行的特性

　　　　利用vertical-align: middle 来设置元素基于父元素垂直对齐方式(top, bottom, middle...)

　　　　问题: 如下search在没有其它元素作对比时vertical-align:middle不生效,所以这里要手动创建一个新元素span,且也使用inline-block和vertical-align设置span元素的类型和对齐方式,将其height占满整个父元素高度,此时search元素的vertical-align:middle就可以比照span生效.

　　　　优化:使用伪元素,就不用在DOM中真实增加一个元素(在style中, 要增加元素的父元素下.bg::after{...}即可)

　　　　

 

补:

1. 将元素水平居中

　　　1. 块级元素要居中

　　　　　a. 在该元素中使用margin：auto (前提：设置宽度，不然会默认占据一行)可以做到水平居中　　　　

　　　2. 行内元素要居中或块级元素中的文字要居中：

　　　　　a. 使用text-align：center, 可以将行内元素居中，也可以使块级元素文字居中

　　　3. 行内和块级都可以

　　　　a.

　　　　　父元素中使用--display：flex；  flex-direction：column；

　　　　　子元素使用--align-self：center；

　　　　b.

　　　　　父元素中使用--display：flex；justify-content：space-around，可以将子元素居中,行内元素会变为块级元素，可以设置宽高

　　　　c.

　　　　　父元素中使用--display：flex；justify-content：center，可以将子元素居中，行内元素会变为块级元素，可以设置宽高

　　　　d. 

　　　　　父级元素设置text-align:center；自身元素设置display: inline-block；即可水平居中

2. 将元素垂直居中

　　　1. 行内文字垂直居中

　　　　a.

　　　　　父元素：{ height：300px }

　　　　　子元素：{ line-height：300px }

　　　2. 行内和块级都可以

　　　　a.

　　　　　父元素中使用--display：flex；

 

　　　　　子元素使用--align-self：center；

　　　　b. 

　　　　　1. 给父元素添加伪元素

　　　　　.父元素样式：before{

　　　　　　　content：‘ ’；

　　　　　　　display：inline-block;

　　　　　　　vertical-align：middle;

　　　　　　　height：100%;

　　　　　}

　　　　　2. 子元素增加：

　　　　　　display：inline-block;

　　　　　　vertical-align：middle;

　　　　c.

　　　　　子元素使用：

　　　　　.子元素样式{

　　　　　　　position:relative；

　　　　　　　top：50%；

　　　　　　　transform：translateY(-50%)

　　　　　}

　　　　d.

　　　　　父元素：{position：relative}

　　　　　子元素：{

　　　　　　　position：absolute；

　　　　　　　top：50%；

　　　　　　　transform：translateY(-50%)

　　　　　}

　　　　e.

　　　　　父元素中使用--{ display：flex；flex-direction：column;；justify-content：space-around }

　　　　f.

　　　　　父元素中使用--{ display：flex；flex-direction：column;；justify-content：center }