水平居中:
一、内联元素:
行内元素的父元素设置 text-align:center;
二、块级元素:
1.定宽块级元素:
设置margin:auto;
2.不定宽块级元素:
⑴加入table标签: 缺点:
利用table标签长度自适应性,即根据内容长度决定,然后再设置margin值使其居中; //增加无意义标签
⑵设置display:inline,使其成为行内元素,然后text-align实现居中; //改变display会缺少一些功能如设置长度
⑶设置浮动与相对定位
父元素float,然后设置position:relative;left:50%; 子元素设置position:relative和left:-50%;实现水平居中
垂直居中:
一、父元素高度确定的单行文本
设置height与line-height值相等 //当内容超过块的宽时,会有内容脱离块
二、父元素高度确定的多行文本
1.加入table标签:
table中的td默认了vertical-align:middle;
2.设置块级元素的display:table-cell;(设置为表格单元显示),激活vertical-align。(chrome、firefox、ie8以上)//兼容性较差