【CSS】水平垂直居中的4种实现（宽高不定）

cppowboy 发布于2019-08-29 14:21 / 3498人阅读

摘要：水平垂直居中的种方案宽高不定方案中我也给了宽高但并不是说宽高固定了。下面四种方案都是能够实现当父元素或子元素的宽高发生改变时依旧维持水平垂直居中布局的方案。

水平垂直居中的4种方案(宽高不定)

方案中我也给了宽高,但并不是说宽高固定了。而是以为不给宽高无法看到效果。
这个方案不固定宽高的是指,用这个方案之后,如果你父元素、子元素的宽高发生了改变,依旧可以保证是水平垂直居中的位置。

下面四种方案都是能够实现,当父元素或子元素的宽高发生改变时,依旧维持水平垂直居中布局的方案。

方案1: 定位

html

css

        .father {
            position: relative;
            width: 200px;
            height: 200px;
            background: skyblue;
        }
        .son {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 100px;
            height: 100px;
            background: red;
        }

方案2: flex

html不变

css

        .father {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            background: skyblue;
        }
        .son {
            width: 100px;
            height: 100px;
            background: red;
        }

方案3: table布局

需要设置父元素为display:table-cell,利用vertical和text-align可以让所有的行内块级元素水平垂直居中
给子元素设置 display: inline-block

html 不变

css

  .father {
            display: table-cell;
            width: 200px;
            height: 200px;
            background: skyblue;
            vertical-align: middle;
            text-align: center;
        }
        .son {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: red;
        }

方案4: grid布局 (最新浏览器支持)

html不变

css不变

        .father {
            display: grid;
            align-items:center;
            justify-content: center;
            width: 200px;
            height: 200px;
            background: skyblue;

        }
        .son {
            width: 10px;
            height: 10px;
            border: 1px solid red
        }

GPU云服务器云服务器水平垂直居中实现垂直居中 html的水平居中垂直居中

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

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

css table布局大法，解决你大部分居中、多列等高、左右布局的问题

摘要：基于这样的布局方式，你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。看了这篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中单行定高水平垂直居中单行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左边定宽右边自适应布局左边右边定宽中间自适应三列布局最...

lijinke666 2019-08-29 11:22 评论0 收藏0
css table布局大法，解决你大部分居中、多列等高、左右布局的问题

摘要：基于这样的布局方式，你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。看了这篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中单行定高水平垂直居中单行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左边定宽右边自适应布局左边右边定宽中间自适应三列布局最...

hedge_hog 2019-08-20 11:16 评论0 收藏0
css table布局大法，解决你大部分居中、多列等高、左右布局的问题

摘要：基于这样的布局方式，你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。看了这篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中单行定高水平垂直居中单行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左边定宽右边自适应布局左边右边定宽中间自适应三列布局最...

kun_jian 2019-08-01 15:45 评论0 收藏0
不定元素宽高用css实现内容水平和垂直都居中

摘要：在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素。这篇文章就来总结一下都有哪些方法可以实现水平和垂直都居中。表示这些元素将相对于本容器水平居中，也是同样的道理垂直居中。在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素。而且我们希望不要涉及宽度和高度，也就是说，我们不...

Chao 2019-08-30 15:52 评论0 收藏0
CSS实现水平垂直居中的1010种方式（史上最全）

摘要：划重点，这是一道面试必考题，很多面试官都喜欢问这个问题，我就被问过好几次了要实现上图的效果看似很简单，实则暗藏玄机，本文总结了一下实现水平垂直居中的方式大概有下面这些，本文将逐一介绍一下，我将本文整理成了一个仓库，欢迎大家仅居中元素定宽高适划重点，这是一道面试必考题，很多面试官都喜欢问这个问题，我就被问过好几次了 showImg(https://segmentfault.com/im...

YuboonaZhang 2019-08-29 16:45 评论0 收藏0