块级、行内元素水平垂直居中方法

块级、行内元素水平垂直居中方法

块级元素水平垂直居中

// 为目标元素设置以下属性
position: absolute;
/*top: 0;*/
left: 0;
right: 0;
bottom: 0;
margin: auto;

行内元素水平垂直居中

// 在目标元素的父元素设置以下属性

//目标父元素内内容水平对齐方式
text-align : center ;

//此元素会作为一个表格单元格显示
display : table-cell ;

//设置元素的垂直对齐方式
vertical-align : middle ;

以上三属性连写即可设置行内元素水平垂直居中，只支持IE8+及现代浏览器，与position:absolute;或float:left;属性尽量不一起用

手动设置行内元素水平垂直居中

//在父元素设置
text-align:center;
//行高属性
line-height:0px;