塊元素,行內塊元素,行內元素(水平垂直居中)

1.塊級元素水平垂直居中

 

方法1　　

<!--（該方法兼容ie8以上瀏覽器）-->
position: absolute/fixed;
left:0;
top:0;
right: 0;
bottom: 0;
margin:auto;

 

方法2:

 

<!--前提條件:必需知道該盒子的寬度和高度；-->
position: absolute/fixed;
left:50%;
top:50%;
margin-left:-盒子寬度的一半;
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 

　  原因:將行內元素解析成了文本