水平居中:
1.行内元素的水平居中,对父元素设置:
text-align: center;
2.块级元素的水平居中,对自己设置:
width: 100px; margin: 0 auto;
3.行内元素垂直居中:
1)单行文本的垂直居中:
height: 60px;
line-height: 60px;
2) 多行文本的垂直居中:
2.1)不固定高度的垂直居中:
widght: 200px;
padding 50px; // 通过设置padding实现居中
2.2)固定高度的垂直居中:
html:
<div class='demo'>
<div class='box'> 设置列标记的宽度,样式,颜色 设置列标记的宽度,样式,颜色 设置列标记的宽度,样式,颜色 设置列标记的宽度,样式,颜色 设置列标记的宽度,样式,颜色</div>
</div>
css:
.demo {
height: 200px;
display: table;
}
.box {
display: table-cell;
vertical-align: middle;
}
4.行内元素垂直居中:
见flex