如何让子元素在父元素中水平垂直居中七种方法?

MartinDai 发布于2019-08-30 15:43 / 739人阅读

摘要：第一种定位注意兼容性较好，缺点不支持以下的浏览器第二种定位注意兼容性好缺点必须知道元素的宽高第三种定位注意这是里的样式缺点兼容性不好，只支持的浏览器第四种弹性盒子移动端首选第五种移动端首选第六种形成子元素设置

html:

    
        green

第一种：定位+margin:auto

.container {
        position: relative;
        width: 300px;
        height: 300px;
        background: yellow;
    }
    .box {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 100px;
        height: 100px;
        background: red;
    }

注意：兼容性较好，缺点:不支持IE7以下的浏览器
第二种：定位+margin-left+margin-top

.container {
        position: relative;
        width: 300px;
        height: 300px;
        background: yellow;
    }
    .box {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
        width: 100px;
        height: 100px;
        background: red;
    }

注意：兼容性好;缺点:必须知道元素的宽高
第三种：定位+transfrom

.container {
        position: relative;
        width: 300px;
        height: 300px;
        background: yellow;
    }
    .box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 100px;
        height: 100px;
        background: red;
    }

注意：这是css3里的样式;缺点:兼容性不好，只支持IE9+的浏览器
第四种：弹性盒子

.container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 300px;
        height: 300px;
        background: yellow;
    }
    .box {
        width: 100px;
        height: 100px;
        background: red;
    }

移动端首选
第五种：flex+margin: auto

.container {
        display: flex;
        width: 300px;
        height: 300px;
        background: yellow;
    }
    .box {
        margin: auto;
        width: 100px;
        height: 100px;
        background: red;
    }

移动端首选
第六种：形成table-cell,子元素设置display:inline-block

.container {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        width: 300px;
        height: 300px;
        background: yellow;
    }
    .box {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
    }

注意：兼容性：由于display:table-cell的原因，IE67不兼容
第七种：line-height+display:inline

.container {
        width: 300px;
        height: 300px;
        line-height: 300px;
        text-align: center;
        background: yellow;
    }
    .box {
        display: inline;
        background: red;
    }

职场小白south Joe，望各位大神批评指正，祝大家学习愉快！

云服务器 GPU云服务器 html居中浮动元素 java插入元素方法 html如何获取元素 js如何获取一组元素

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

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

如何让子元素在父元素中水平垂直居中七种方法?

摘要：第一种定位注意兼容性较好，缺点不支持以下的浏览器第二种定位注意兼容性好缺点必须知道元素的宽高第三种定位注意这是里的样式缺点兼容性不好，只支持的浏览器第四种弹性盒子移动端首选第五种移动端首选第六种形成子元素设置 html: green 第一种：定位+margin:auto .container { position: relative;...

darkbug 2019-08-02 16:11 评论0 收藏0
css实现元素水平垂直居中

摘要：结构如下实验结果如下实现了子元素的水平垂直居中，同时可观察到两张图溢出的方式不同绝对定位的溢出或或的溢出 1.绝对定位，利用负边距利用负边距实现子元素居中(相对于父元素(position:relative))，需已知子元素的width与height；且把子元素的position设为absolute，绝对定位；以及设置left和top为50%；再加上负边距，margin-left值为w...

ninefive 2019-08-29 13:46 评论0 收藏0
CSS学习笔记－元素水平垂直居中

摘要：前言布局中经常会遇到元素水平居中的需求今天根据以前的学习笔记以及看过的一些技术博客做个元素水平居中的小结。文字的水平垂直居中文字水平居中文字的水平垂直居中在于同高然后。前言布局中经常会遇到元素水平居中的需求,今天根据以前的学习笔记?以及看过的一些技术博客做个元素水平居中的小结。正文图片的水平垂直居中 //图片地址为http://static.jsbin.com/ima...

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

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

Apollo 2019-08-30 14:15 评论0 收藏0
初探flex布局

摘要：一布局概述布局是一种较新盒子模型，在布局模型中，弹性容器的子元素的排布可以比较灵活，可以根据容器的大小自动扩展或收缩其大小。下面我们来看用布局怎么解决这些问题。所以学会使用布局是非常有必要的。想详细了解布局请点击这里。一 flex布局 1.1 flex概述 flex布局是一种较新CSS盒子模型，在flex布局模型中，弹性容器的子元素的排布可以比较灵活，可以根据容器的大小自动扩展或收缩...

Jeffrrey 2019-08-29 12:48 评论0 收藏0