垂直居中解决方案总结

王伟廷发布于2019-08-29 12:43 / 3250人阅读

摘要：而的百分比是相对于元素自身的宽高，这个方法可以用于子元素高度不确定时，而且不用手动除以，比上面几个方便了很多。，全为可以实现上下左右居中，超级方便这也是我在项目里用得最多的。上面是基于绝对定位的解决方案，还有其他的。

点这个链接可以直接看到效果：http://www.zhouyangyang.com/c...

这是公用样式

.outer {
    width: 150px;
    height: 200px;
    background: pink;
    border: 1px solid pink;
}
.inner {
    background: #77BFCD;
}

1,负margin
父元素position relative,子元素position absolute,top 50%,margin-top 为负的元素height/2。
缺点：子元素高度固定的时候才能用，而且计算麻烦。



    
        first line
        second line

2，css3 calc()
跟上面没啥区别，也是要子元素高度固定，手动除以2。
不过可以少写一行margin-top。



    
        first line
        second line

3,translateY
百分比形式的margin-top是相对于元素包含块的宽度的，所以上面的方法都要手动除以2。
而 translateX translateY 的百分比是相对于元素自身的宽高，这个方法可以用于子元素高度不确定时，而且不用手动除以2，比上面几个方便了很多。
有些浏览器下，transform后如果宽高的像素点不是整数，显示会模糊，可以用transform-style:preserve-3d修复。



    
        first line
        second line

4,margin auto，top right left bottom 全为0
可以实现上下左右居中，超级方便,这也是我在项目里用得最多的。不过这个只能在元素设置了宽高的时候用。



    
        first line
        second line

上面是基于绝对定位的解决方案，还有其他的。
5，表格布局
父元素display table-cell,virticl-align middle,子元素display table。



    
        first line
        second line

6，行内块方法
将子元素设置display:inline-block，vetical-align:middle,父元素行高等于高度，
缺点是只能用在父元素高度固定的条件下。



    
        first line
        second line

7，另一种行内块方法
给父元素一个:before伪子元素，让这个伪元素height:100%，然后让这个伪子元素和真正的子元素都display:inline-block vetical-align:middle。



    
        first line
        second line

云服务器 GPU云服务器垂直居中实现垂直居中水平垂直居中文字垂直居中

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

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

对css居中的一点总结

摘要：为了更好的加深对居中的理解，搜集和阅读相关资料，发现不错的文章将其整理出来。在学习前端的过程中，发现元素和文本的水平居中和垂直居中，是经常会出现的问题，在实际工作中也会经常碰到。居中的技巧有很多，但在编写代码的过程中，发现有时候技巧管用，有时候不管用，于是就将每个知道的方案都试一遍，找到合适的。这种情况究其原因是对居中的认识不够深入，只是停留在实现需求的水平上。为了更好的加深对居中的...

BenCHou 2019-08-29 11:17 评论0 收藏0
css对齐方案总结

摘要：核心代码利用布局利用布局，其中用于设置或检索弹性盒子元素在主轴横轴方向上的对齐方式而属性定义子项在容器的当前行的侧轴纵轴方向上的对齐方式。核心代码相对于的水平垂直居中列表布局兼容性好核心代码布局核心代码css对齐方案总结垂直居中通用布局方式(内敛元素和块状元素都适用) 利用flex:核心代码: 12345 .container{ display:flex; ...

marek 2019-04-23 11:45 评论0 收藏0
css居中总结

摘要：前言一直有个想法要把各种居中的方法总结一下，但还是一直没有时间去整理。最近刚好在做样式重构的项目，顺便把一下自己有用过的或积累的居中方法给总结一下。又必须有个父级对其进行设置居中。前言一直有个想法要把各种居中的方法总结一下，但还是一直没有时间去整理。最近刚好在做样式重构的项目，顺便把一下自己有用过的或积累的居中方法给总结一下。水平居中行内元素水平居中行内元素的居中比较简单，直...

gxyz 2019-08-30 15:55 评论0 收藏0
前端-CSS3&H5

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

xiaolinbang 2019-08-29 14:14 评论0 收藏0
总结：前端开发中让元素水平垂直居中的方法

摘要：如果要居中的块级元素直接是内联元素等，直接在其父级元素上加上属性即可图片之间，浏览器会产生默认的间距，父元素设置可以很好地解决这个问题。使用水平居中前提居中的元素必须是块级元素，如果是内联元素，需要添加属性而且元素不浮动。前端开发中，我们经常需要对元素进行水平垂直居中。为此，小编特地总结了让元素居中的方法。 showImg(https://segmentfault.com/img/b...

fnngj 2019-08-02 12:02 评论0 收藏0