标签:
水平居中:
1.elements的display属性为inline或者inline-*(inline-block,inline-table,inline-flex等)(比如文本元素或者a链接)
①可以使用text-align:center
固定宽度的块级元素
①使用margin:0 auto实现水平居中
②绝对定位,left:50%,margin-left:-1/2元素宽度
垂直居中:
1.elements的display属性为inline或者inline-*(inline-block,inline-table,inline-flex等)(比如文本元素或者a链接)
单行:①使用padding-top和padding-bottm相同值
②使用line-height,white-space:nowrap
③使用vertical-align:middle
多行:
2.块级元素
固定高度:①绝对定位,top:50%,margin-top:-1/2元素高度
高度不固定:①绝对定位,top:50%,translateY(-50%)
flex布局:display:flex;flex-direction:column;justify-content:center;
标签:
原文地址:http://www.cnblogs.com/walk-on-the-way/p/5743576.html