CSS水平居中和垂直居中

z2xy 发布于2019-08-01 18:42 / 974人阅读

摘要：不定宽块状元素水平居中垂直居中利用属性垂直居中垂直居中利用布局不定高不定宽垂直居中垂直居中设置或另外设置为垂直居中或上下居中左右居中居中

CSS水平居中和垂直居中 行内元素居中 水平居中

1.给父元素设置text-align:center


    行内元素span居中

2.flex布局
设置父元素display:flex;justify-content:center;


    行内元素span居中

垂直居中

1.父元素高度确定的单行文本(行内元素),可设置line-height等于父元素高度


    坦克

2.父元素高度确定的多行文本(行内元素)
方法一:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align：middle( td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。)




    
    父元素高度确定的多行文本
    




    
    
        
            
                看我是否可以居中。
                看我是否可以居中。
                看我是否可以居中。
                看我是否可以居中。
                看我是否可以居中。

方法二:设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性


    
        坦克
        航母

块级元素居中 水平居中

1.定宽块状元素,设置左右margin值为auto


         坦克
         航母

2.不定宽块状元素方法
方法一:加入table标签,table标签长度自适应性,即不定义其长度也不默认父元素body的长度(其长度根据其内文本长度决定),可以看做一个定宽的元素,然后利用定宽块状居中的margin方法,使其水平居中

方法二:改变块级元素的 display 为 inline类型(设置为行内元素显示),然后使用text-align:center来实现居中效果


    
    不定宽块状元素水平居中
    



    
        1
        2
        3

方法三:通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。




    
    不定宽块状元素水平居中
    




    
        1
        2
        3

垂直居中

1.利用CSS属性transform:translate(x,y)




    
    垂直居中
    



    垂直居中

2.利用flex布局(不定高不定宽)




    
    垂直居中
    




    垂直居中

3.设置position:absolute或fiexed,另外margin设置为auto




    
    垂直居中
    




    居中

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

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

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

CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

cc17 2019-08-02 10:11 评论0 收藏0
CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

AlienZHOU 2019-08-30 15:53 评论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
【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

Apollo 2019-08-30 14:15 评论0 收藏0
【前端】这可能是你看过最全的css居中解决方案了~

摘要：水平居中行内元素解决方案适用元素文字，链接，及其其它或者类型元素，，部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行内元素解决方案适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，i...

csRyan 2019-08-30 13:54 评论0 收藏0