【水平居中】
行内: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(文本元素)。