资讯专栏INFORMATION COLUMN

css垂直居中整理

CompileYouth / 1815人阅读

摘要:添加一个浮动,居中内容清除浮动达到垂直居中效果适用范围通用使用绝对定位和负边距或者适用范围通用利用仅利用适用范围只对文本有效块级元素无效多行时,断词会有问题使用参考阮一峰两篇布局文章绝对定位和

1.添加一个浮动div,居中内容清除浮动达到垂直居中效果
适用范围:通用

    
    
        

2.使用绝对定位和负边距(或者translate)
适用范围:通用

    
    
        

3.利用table-cell

    
    
        

4.仅利用line-height
适用范围:只对文本有效(块级元素无效)
多行时,断词会有问题

    
    
        
123123

5.使用flex
参考阮一峰两篇flex布局文章
http://www.ruanyifeng.com/blo...
http://www.ruanyifeng.com/blo...

    
    
        

6.绝对定位和0

    
    
        

7.-webkit-box

    
    
        

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

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

相关文章

  • 水平、垂直居中布局方案整理

    摘要:水平居中,相当于垂直居中,相当于文本式终极居中很容易便能看出,这其实是水平居中方案以及垂直居中方案的合用,也算是把文本排版的特性都利用了个遍了。 讨论前提 本文都是基于这样的HTML结构来进行讨论的: DEMO 水平居中 inline-block:inline-block + text-align .parent{ text-align: cente...

    taohonghui 评论0 收藏0
  • css常用技巧整理-布局综述篇

    摘要:效果图为了让效果更明显,特意设置了两边字体大小不同关键代码父容器子容器这里要提一下的是,只对于内联元素或者内联内容有效,比如说为块级元素标签设置行高,实际上是为标签中的内联文字设置了行高。允许指定负长度值和百分比值。 前言 先扯一段废话来引入好了。又很久没有写文章了(间接性踌躇满志,持续性混吃等死),几个月了登上来看到有人收藏和点赞,感到很惭愧,最近主要精力花费在react和redux...

    endiat 评论0 收藏0
  • CSS中的多种居中方式

    摘要:同样,需要水平居中就加上水平居中块级元素,设置固定宽度,左右等于行级元素居中对块级的父级使用,能让内部的匿名行盒文字行内元素元素在父亲里水平居中我的博客即将同步至腾讯云社区,邀请大家一同入驻 前言 CSS居中一直是我想要整理记录的,拖了很久,今天就顺便整理一下 居中的多种方式 flex布局居中 是我目前使用最多的一种方式,flex布局也是现在最方便的一种布局,广泛用于pc端和移动端 ....

    junfeng777 评论0 收藏0
  • CSS中的多种居中方式

    摘要:同样,需要水平居中就加上水平居中块级元素,设置固定宽度,左右等于行级元素居中对块级的父级使用,能让内部的匿名行盒文字行内元素元素在父亲里水平居中我的博客即将同步至腾讯云社区,邀请大家一同入驻 前言 CSS居中一直是我想要整理记录的,拖了很久,今天就顺便整理一下 居中的多种方式 flex布局居中 是我目前使用最多的一种方式,flex布局也是现在最方便的一种布局,广泛用于pc端和移动端 ....

    aristark 评论0 收藏0
  • CSS实现水平|垂直居中漫谈

    摘要:原文首链实现水平垂直居中漫谈利用进行元素的水平居中,比较简单,手到擒来行级元素设置其父元素的,块级元素设置其本身的和为即可。 原文首链:CSS实现水平|垂直居中漫谈 利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可。而撸起垂直居中,相信于大多初撸者来说,...

    孙吉亮 评论0 收藏0

发表评论

0条评论

CompileYouth

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<