ES2015(es6)
js文档Node.jsVue.jsReactjQueryES2015(es6)angularjscss3动画vbs最新电影flutter微信小程序C教程java教程C++教程C#教程php教程sql教程mysql教程android教程ios教程python教程正则表达式

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

发布时间：2019-08-14 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了关于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做实验就可以

<!DOCTYPE htML>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<!--<link rel="stylesheet" href="./test.css">-->
<style>
    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;
    }
</style>

<body>
    <span>
        <img class="middle" src="./img/1.jpg" alt="">a
        <img class="middle" src="./img/1.jpg" alt="">
    </span>-->

    <div class="div">
        <img class="middle" src="./img/1.jpg" alt="呵呵">
    </div>

    <div class="big">
        <div class="small"></div>
        <div class="small"></div>
        <div class="small"></div>
        <img src="./img/1.jpg" style="width:100px;" class="small"  alt="">
    </div>

    <script>
        //计算自己要计算的元素的位置判断是否居中。
        calc(true);
        function calc(flag) {
                VAR oheight = document.querySelector('.middle').offsetTop;
                alert(oheight)
        }
    </script>
</body>

</html>

部分idea 参考自以下文章

脚本宝典总结

以上是脚本宝典为你收集整理的关于Css的垂直居中的一些方法全部内容，希望文章能够帮你解决关于Css的垂直居中的一些方法所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：alertalertallallbuttonbuttoncharcharClassdivdodocumentes6forforformformfunctionfunctionfunctionininjavalinknamenamepost-format-galleryselecttexttexttoptoptruevar
猜你在找的ES2015(es6)相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新ES2015(es6)教程
热门ES2015(es6)教程