CSS的居中方式

lushan 发布于2019-08-29 12:28 / 786人阅读

摘要：这样一来外部容器正好可以将内容垂直的包裹住并且由于外部容器是浮动的所以容器的宽度和内层的宽度一致这样可以做到完全自适应的实现居中。

刚学习CSS的时候尝试过几种居中的方法,这些方法不需要借助JS手段,所写的方法有一个原则,就是在不需要直接人为的设定好宽高计算后再实现居中,还有诸如table布局啊、行高设定、margin：auto之类的我就不写了。

以下几种方法针对不同的浏览器,经过测试,从IE8及以下到IE9+、Safari都有不同的方法支持。

1.标准浏览器全兼容,内容水平居中

    .wraper{
        float:left;
        position:relative;
        left:50%;
        clear:both;
    }
    .wraper div{
        border:1px solid palevioletred;
        position:relative;
        left:-50%;
    }

    
        瓜迪奥拉
    
    
        克洛普克洛普克洛普克洛普克洛普克洛普克洛普
    
    
        孔蒂
    
    
        穆里尼奥
    
    
        温格

这种方法的原理是让容器层和内层都相对自己移动,容器层移动自身宽度的50%,内层相对于移动自身宽度的-50%。这样一来外部容器正好可以将内容垂直的包裹住,并且由于外部容器是浮动的,所以容器的宽度和内层的宽度一致,这样可以做到完全自适应的实现居中。该方法适用于竖向排版的情况。

2.IE9+以上的浏览器,垂直居中

    div{
        position: absolute;
        width:100px;
        height:50px;
        top:0;
        right:0;
        bottom:0;
        left:0;
        margin:auto;
        background:#f60;
    }

这个方法原理不太清楚,我是这样理解的,当这个div哪里也去不了,然后margin还是auto的时候,他就只能相对于外部容器垂直居中了..

3.IE8及以下的垂直居中

    .parent{
        height:500px;
        width:500px;
        font-size:438.6px;/*(font-size:width/114)*/
        background-color:paleturquoise;
    }
    .child{
        background-color:deepskyblue;
        vertical-align:middle;
        zoom:1;
        display:inline;
        width:50px;
        height:50px;
        font:18px/18px "微软雅黑";
    }
    /*.child一定要写上font属性,这个方法在ie中才会实现.*/

这个方法只有IE8及以下才可以实现,至今也没明白父级的font-size属性为什么一定要等于宽度/114,IE真是一个奇葩的存在...在虚拟机下测试这个方法确实有效,子级一定要写font-size属性,即使没有内容也要写,否则无效。针对IE8以下的兼容性时,这个方法可以作为一种hack使用。

4.除IE和Safari之外的标准浏览器

IE是指9及以下,我只测试了这些版本的IE,另外Safari也是不支持的。

    .box{
        width:600px;
        height:600px;
        border:1px solid palegreen;
        position:relative;
    }
    .item{
        width:200px;
        height:200px;
        border:1px solid palegreen;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);         
    }

容器和内层都已经脱离了文档流,内层先移动自身的50%,再通过transform属性移动自身的-50%,修正后的top、left就正好处于容器内的垂直居中位置了。

5.flex方法

IE依然不支持CSS3是必须的,遗憾的是Safari依然是不支持的,至少在我测试阶段(5.1.7)window下还没有支持。

    #box{
        width:800px;
        height:800px;
        display:flex;
        border:1px solid palevioletred;
    }
    #box div{
        width:200px;
        height:200px;
        border:1px solid #2189BF;
        flex-direction:row;
        justify-content:center;
        align-self: center;
    }

flex针对垂直居中的方法比较直接,justify-content:center; align-self: center;这两个属性直接设置为center就可以了,在不支持CSS3的浏览器中是无法实现的,这也是flex的暂时的缺点之一。

云服务器 GPU云服务器 html居中css css引入方式 HTML的居中 html层的居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111924.html

前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0
【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

Apollo 2019-08-30 14:15 评论0 收藏0
CSS居中方法总结

摘要：此时检查元素即可即可实现内层的实现了居中这种方式是最为我们熟知的，其缺点是需要设置子元素的宽度。交叉轴居中当设置了属性时，主轴的方向会改变。垂直居中实现方案用的属性，以及定位，与上面的水平居中类似，只是改为即可。水平居中实现方案确定宽度的元素水平居中 1.我们可以通过给该元素的父级设置margin: 0 auto的方式来实现。HTML: ...

ralap 2019-08-30 13:07 评论0 收藏0
【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

Scholer 2019-08-02 16:14 评论0 收藏0
【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

mayaohua 2019-08-29 18:44 评论0 收藏0