面试--css实现元素的水平和垂直居中

nihao 发布于2019-08-29 13:16 / 1603人阅读

摘要：针对单行文本使用针对已知高度的块级元素相对绝对针对行内块元素实现处置居中属性是针对兄弟级别的元素设置的其中也可以使用或者来代替针对父元素和子元素的高度都未知情况下定位针对父元素和子元素的高度都未知情况下父表格布局

针对单行文本

使用line-height

  .wrap{
        width: 200px;height: 200px;background: yellow;
    }
    .wrap span{
        line-height: 200px ;text-align: center;
    }

     sasas

针对已知高度的块级元素

相对+绝对+margin-top:-height/2+margin-left:-width:-width/2

针对行内块元素实现处置居中

.wrap{
        width: 200px;height: 200px;background: yellow;
    }
    .wrap img{
        vertical-align:middle;text-align: center;
    }
    .wrap .block{
        height: 100%;width: 0;
    }

vertical-align:vertical 属性是针对兄弟级别的元素设置的
其中.block也可以使用 img:after或者:before来代替

针对父元素和子元素的高度都未知情况下定位+transform

 .wrap{
        width: 200px;height: 400px;background: yellow;position: relative;
    }
    .wrap div{
        position: absolute;
        top:50%;left: 50%;transform: translate(-50%,-50%);background: red;
    }

        
            sasas
            sasas
            sasas
            sasas

针对父元素和子元素的高度都未知情况下父：text-align:center+表格布局子：vertical-align:middle+表格布局

  .wrap{
        width: 200px;height: 400px;background: yellow;display: table;text-align: center;
    }
    .wrap div{
        display: table-cell;vertical-align:middle;
    }
    
        
            sasas
            sasas
            sasas
            sasas

针对父元素高度但是子元素的高度已知都未知情况下父：相对定位子：绝对定位+四个属性都为0 +margin:auto

 .wrap{
        width: 200px;height: 400px;background: yellow;
        position: relative;
    }
    .wrap div{
        width:20px;height:100px;position: absolute;top:0;left: 0;right: 0;bottom: 0;margin: auto;
        background: red;
    }
    
        
            sasas
            sasas
            sasas
            sasas

使用flex布局

  .wrap{
        width: 200px;height: 400px;background: yellow;
        position: relative;
        display: flex; justify-content: center; flex-direction: column;
    }
    .wrap div{
        width:20px;top:0;left: 0;right: 0;bottom: 0;margin: auto;
        background: red;
    }
    
        
            sasas
            sasas
            sasas
            sasas

私有云混合云水平垂直居中实现垂直居中 html的水平居中垂直居中

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

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

(面试题)垂直居中的几种实现方式

摘要：尤其是在实际页面中，有很多特殊的场景，导致水平居中实现起来比较麻烦。这篇文章旨在纪录一些我知道的居中方式。以一道经典面试题为例一个的在一个水平垂直居中，用实现。首先定义元素层和垂直居中无关的样式直接定义在里。相比较水平居中，垂直居中比较复杂点。尤其是在实际页面中，有很多特殊的场景，导致水平居中实现起来比较麻烦。这篇文章旨在纪录一些我知道的居中方式。以一道经典面试题为例：一个200*2...

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

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

YuboonaZhang 2019-08-29 16:45 评论0 收藏0
CSS实现水平垂直居中的1010种方式（史上最全）

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

OnlyLing 2019-08-23 11:58 评论0 收藏0
CSS实现水平垂直居中的1010种方式（史上最全）

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

zorpan 2019-08-05 15:00 评论0 收藏0
常见面试题—css实现垂直水平居中

摘要：常见面试题实现垂直水平居中前言面试中常常被问到，如何使用来实现一个元素的垂直水平方向上居中，特别是笔试题的时候，这道题目的出现频率还是比较高的，当然，在我们的生活中，也常常会有垂直水平居中的需求。常见面试题—css实现垂直水平居中前言面试中常常被问到，如何使用css来实现一个元素的垂直水平方向上居中，特别是笔试题的时候，这道题目的出现频率还是比较高的，当然，在我们的生活中，也常常...

gougoujiang 2019-08-29 15:40 评论0 收藏0