测试 居中

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;

posted @ 2019-11-20 22:33  enych  阅读(190)  评论(0编辑  收藏  举报