块元素,行内块元素,行内元素(水平垂直居中)

1.块级元素水平垂直居中

 

方法1　　

1 <!--（该方法兼容ie8以上浏览器）-->
2 position: absolute/fixed;
3 left:0;
4 top:0;
5 right: 0;
6 bottom: 0;
7 margin:auto;

 

方法2:

 

1 <!--前提条件:必需知道该盒子的宽度和高度；-->
2 position: absolute/fixed;
3 left:50%;
4 top:50%;
5 margin-left:-盒子宽度的一半;
6 margin-top:-盒子高度的一半;

方法3:

 

 <!--前提条件:必需知道该盒子的宽度和高度；-->
position: absolute/fixed;
left:50%;
top:50%;

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

 

 

 

 

 

 

2. 行内块元素水平居中

 　　给父元素加 : text­algin:center

　  给本身添加margin: top/bottom 值调节居中

3.行内元素水平垂直居中　　  

　　给父元素加 : text­algin:center ;line­height = height 

　  原因:将行内元素解析成了文本