媒体查询2及元素水平垂直居中

一、媒体查询

使用的环境是 不同的屏幕需要显示不同的样式

css需要写很多情况下 可以使用如下的属性来响应式的布局

<link rel="stylesheet" href="..." media="all and (....)">

二、元素水平垂直居中

1.行内元素的水平垂直居中

                   用text-align=center和设高度，然后设line-height（行高）跟高度一样 

2.块级元素的水平垂直居中

第一种、弹性盒模型

使用弹性盒模型 实现水平和垂直居中

第二种、 用绝对定位配合margin的方式实现

margin的值为负值

            margin-left是宽度的一半

            margin-right是高度的一半

这种方式有缺陷 需要知道固定的宽度和高度才行，对于自适应的块级元素实现不了

第三种、借助css3的变形属性Transform

                                         在当前位置偏移自身宽高的一半

第四种、在不可以使用css3变形和flex布局

                    需要盒子有宽高，但是不需要去计算偏移盒子的宽高

3.多行文本的水平垂直居中

1.line-height不能实现多行文本的垂直居中

 

                        发现line-height的值跟高的值一样和不一样都没有用 

2.不设置高度   通过设置padding实现

 

 3.固定高度的垂直居中

             使用display设置为table，配合样式vertical-align设置为middle来实现