css 居中

时间:2021-08-12 08:13:18

今天来总结一下自己知道的居中方法:

一.水平居中

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的值相等即可。

今天想到的就这些,想到其他的再来添加。