关于Css的垂直居中的一些方法

前两种方法称为大致居中，一般误差随高度的减小而减小，不过一般来说不怎么看得出来，除非你用javascript调用
offsetTop来查看。不然没有强迫症的比较难看出来。但是兼容性很好，尤其是table-cell的从IE6即可使用

1.使用table-cell处理图片间的关系

父元素使用display:table-cell; vertical:middle子元素使用display:inline-block; vertical:middle;

即可简单使图片居中

2.使用line-height处理

父元素使用display:inline-block;height:300px;line-height:300px;vertical-align:middle;//这里的line-heiht要跟父元素大小一样；子元素使用vertical-align:middle;

第三种称为绝对居中，不居中来找我，就是兼容性有点差，起码要IE9 才能兼容，一般的webkit也都没问题就是。随着ES6的泛滥，很快老旧的浏览器也就成了古董，所以这个居中方法也挺不错，就是对于兼容性很高的项目，最好不要使用。但是有问题的是，必须指定height，因为显然，这边计算的是下移50%的当前高度的Y轴。而前面两种方法不需要
3.使用translateY来垂直居中

父元素使用position:relative;height:400px;子元素position:relative;transfrom:translateY(-50%);height:100px;top:50%;

以下是全部代码，自己找张demo.jpg做实验就可以

    test-->    span {        vertical-align: middle;        width: 300px;        height: 400px;        display: inline-block;        border: 1px red solid;        line-height: 400px;    }    .middle {        width: 100px;        /*vertical-align: middle;*/        position: relative;    }    .div {        height: 400px;        width: 500px;        display: table-cell;        vertical-align: middle;        border: 1px solid red;    }    .big {        width: 300px;        height: 100px;        position: relative;        border: 1px red solid;    }    .small {        width: 50px;        height: 50px;        position: relative;        transform: translateY(-50%);        top: 50%;        border: 1px red solid;        display: inline-block;    }a    -->        //计算自己要计算的元素的位置判断是否居中。        calc(true);        function calc(flag) {                var oheight = document.querySelector('.middle').offsetTop;                alert(oheight)        }

部分idea 参考自以下文章

关键字：css, html, 居中, height

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！