CSS居中的方法总结

时间:2024-10-24 12:04:14

【水平居中】

行内:text-align:center;

定宽块状:1.left:0 right:0然后用margin: auto外边距填充,水平方向不会发生外边距叠加;  2.绝对定位(父元素定位不能是普通流)

不定宽块状:

1.<table> <tbody><tr><td>,然后table即是定宽块状元素

2.display:inline-block 然后当做行内元素处理,可以实现居中且保留块元素特性,如设置宽高。

【垂直居中(假设父元素高度不定)】

定位选择:普通流、float不能在垂直方向被定位,故只考虑absolute和relative,但relative定位没有脱离文档流,会造成顶底与父元素的margin合并。因此一般非文本元素的垂直居中都用absolute定位。

居中思路有两种:

一、先将待定位元素坐标定位到相应位置,再配合负边距调整(需要用到自身高度,或用CSS3的transform:translateY(-50%));

二、利用自动填充来“撑”到居中,这一思路的做法包括margin(父元素不能为普通流定位,否则不以父元素为坐标基准)和line-height(文本元素)。