div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果。
1. div水平居中:设置margin的左右边距为自动。margin:0 auto;
2. div中的文字居中:将div的行高设置跟其高度一样的值。 height:20px; line-height:20px;
2.1div中的图片居中,方法一:将div的行高设置跟其高度一样的值,将其中的图片img外套上标签i,设置i和div同时垂直居img属性
img属性vertical-align
垂直居中
margin:auto;
position: absolute; /* 父元素需要相对定位,子元素绝对定位 */
left: 0;
top: 0;
right: 0;
bottom: 0;
垂直居中
position: absolute; /* 父元素需要相对定位,子元素绝对定位 */
top: 50%;
left: 50%;
margin-top:-100px ; /* 二分之一的height,width */
margin-left: -100px;