测试 居中

Posted 2020-11-22 enych

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;