块元素,行内块元素,行内元素(水平垂直居中)
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. 行内块元素水平居中
给父元素加 : textalgin:center
给本身添加margin: top/bottom 值调节居中
3.行内元素水平垂直居中
给父元素加 : textalgin:center ;lineheight = height
原因:将行内元素解析成了文本
赞 (0)