垂直居中方法检测

Winer 发布于2019-08-28 18:14 / 1632人阅读

摘要：使用和属性注意兼容到并且需要给一个高度。优点中的内容不用固定。方法方法三方法四单行文本垂直居中

1、使用table和tabel-cell属性
html


    
        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

css

html,body{
    height: 100%;
}
.wrapper{
    display: table;
    height: 100%;
}
.cell{
    display: table-cell;
    vertical-align: middle;
}

注意：兼容到ie8,并且wrapper需要给一个高度。优点：cell中的内容不用固定。

2、方法2
html


    
        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

css

.wrapper2{
    position: relative;
    height: 100%;
}
.wrapper2 .content{
    position: absolute;
    top: 50%;
    left: 0;
    height: 200px;
    overflow: auto;
    margin-top: -100px;
}

3、方法三
html


    
    
        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

css

.wrapper3{
    height: 100%;
}
.wrapper3 .floater{
    float: left;
    height: 50%;
    margin-bottom: -120px;
    border: 1px solid #00ff00;
}
.wrapper3 .content{
    clear: both;
    height: 240px;
    position: relative;
}

4、方法四
html


    
        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

css

 .wrapper4{
    position: relative;
    height: 100%;
}
.wrapper4 .content{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 70%;
    height: 240px;
}

5、单行文本垂直居中
html


        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

css

.wrapper5{
    line-height: 100px;
}

混合云私有云垂直居中实现垂直居中水平垂直居中文字垂直居中

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

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

css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0
总结的一些JavaScript的冷知识

摘要：例如要删除数组的第个元素，可以使用这样的语句不过对于大型数组来说，这个函数的效率可能不高。可选参数可以限制被分割的片段数量。看代码吧下面的代码利用的来实现垂直居中和水平居中转自快乐人生，积极进取总结的一些的冷知识 1、!!将一个值方便快速转化为布尔值 console.log( !!window===true ); 2、不声明第三个变量实现交换 var a=1,b=2; a=[b...

lingdududu 2019-08-22 10:56 评论0 收藏0
一些面试时关于 CSS 的问题

摘要：可以试试去掉的会发生很奇妙的事呢附加关于子元素设置为而引发的问题。附加关于开启硬件加速提升网站动画渲染性能问题。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 1. 水平垂直居中问题这可以说是最经典的问题了，水平垂直居中，这个问题从入门前端一直到面试，甚至到工作之后都会时不时遇到，最近的面试也被问过这之类的问题，这里还是好好总结一番，以作备忘。公用 HTML 部分： ...

HackerShell 2019-08-29 13:08 评论0 收藏0
CSS-水平居中、垂直居中、水平垂直居中

摘要：水平居中水平居中可分为行内元素水平居中和块级元素水平居中行内元素水平居中这里行内元素是指文本图像按钮超链接等，只需给父元素设置即可实现。 1、水平居中水平居中可分为行内元素水平居中和块级元素水平居中 1.1 行内元素水平居中这里行内元素是指文本text、图像img、按钮超链接等，只需给父元素设置text-align:center即可实现。 .center{ te...

scwang90 2019-08-30 14:19 评论0 收藏0
CSS-水平居中、垂直居中、水平垂直居中

摘要：水平居中水平居中可分为行内元素水平居中和块级元素水平居中行内元素水平居中这里行内元素是指文本图像按钮超链接等，只需给父元素设置即可实现。 1、水平居中水平居中可分为行内元素水平居中和块级元素水平居中 1.1 行内元素水平居中这里行内元素是指文本text、图像img、按钮超链接等，只需给父元素设置text-align:center即可实现。 .center{ te...

Lsnsh 2019-08-02 10:04 评论0 收藏0