今天来总结一下自己知道的居中方法:
一.水平居中
1.text-align:center; 文字水平居中,也可以放在父元素中,强行让子元素居中。
2.margin: 0 auto; 使子元素在父元素中水平居中。
二、绝对居中
1. 父元素定位,子元素也使用定位:position:absolute;
然后子元素使用 top:0; left:0;right:0;bottom:0;margin:auto;width:xx; (此方法必须定义子元素的高度);
2. 父元素定位,子元素也使用定位:position:absolute;
然后子元素使用 left: 50%; top:50%; transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%); /* Safari */ (无需定义高度,但是要注意兼容性写法)。
三、垂直居中
1.display:inline-block; vitical-align:middle; (无需定义高度,也可以实现)
2.父元素设置 display:table; 子元素设置display:table-cell;vitical-align:middle;
3.单行文字居中显示,设置height的值与line-height的值相等即可。
今天想到的就这些,想到其他的再来添加。