水平垂直居中

incredible 发布于2019-08-30 12:43 / 2575人阅读

摘要：笔记整理之一水平垂直居中固定宽高一般使用负值进行居中不固定宽高一般使用和进行下面三种方案平常都很少被使用的到移动端一般使用方案在移动端都可以使用文本水平垂直居中文本垂直文本垂直居中移动端水平垂直居中垂直居中方案快级元素

笔记整理之一：水平垂直居中

PC固定宽高、一般使用maring负值进行居中
PC不固定宽高、一般使用relative和left进行

下面三种方案平常都很少被使用的到
    verticle-align: middle;
    display: table-cell;
    top:0; right:0; bottom:0; left:0;

移动端一般使用（PC方案在移动端都可以使用）

transform: translate(-50%,-50%);
display: flex; justify-content: center; align-items: center;

文本水平垂直居中




    
    文本垂直
    



    文本垂直居中

移动端水平垂直居中

1、 CSS3垂直居中方案




    
    快级元素水平垂直居中(不固定宽高)
    



    
        transform: translate(-50%,-50%);居中方案

2、flex居中方案




    
    flex水平垂直居中
    



    flex水平垂直居中

PC端水平垂直居中

1、快级元素水平垂直居中(固定宽高、最常用)




    
    水平、垂直居中
    



    快级元素水平垂直居中(固定宽高)

4、快级元素水平垂直居中(不固定宽高)




    
    快级元素水平垂直居中(不固定宽高)
    



    
        快级元素水平垂直居中(不固定宽高)

2、绝对定位居中（禁IE6、7）




    
    绝对定位水平垂直居中
    



    绝对定位水平垂直居中

3、非快级元素水平垂直居中（vertical-align: middle禁IE6、7、8）




    
    非快级元素水平垂直居中

5、table-cell水平垂直居中




    
    绝对定位水平垂直居中
    



    
        绝对定位水平垂直居中

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

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

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

水平居中、垂直居中、水平垂直居中、浮动居中、绝对定位居中.......帮你搞定

摘要：包括水平居中，垂直居中，还有水平垂直居中。如果要再要细分，还要分浮动元素绝对定位的居中。样式水平居中的元素图片的水平居中图片的居中，比较特殊。 2018.05.29 居中一个元素？你会想到啥？这里面的知识还真不少。包括水平居中，垂直居中，还有水平垂直居中。如果要再要细分，还要分浮动元素、绝对定位的居中。为了代码简介，没有加背景和其他样式，需要看效果的，可以加上背景。目录：第一...

waterc 2019-08-29 15:32 评论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
水平垂直居中

摘要：笔记整理之一水平垂直居中固定宽高一般使用负值进行居中不固定宽高一般使用和进行下面三种方案平常都很少被使用的到移动端一般使用方案在移动端都可以使用文本水平垂直居中文本垂直文本垂直居中移动端水平垂直居中垂直居中方案快级元素笔记整理之一：水平垂直居中 PC固定宽高、一般使用maring负值进行居中PC不固定宽高、一般使用relative和left进行下面三种方案平常都很少被使用的到 ...

eechen 2019-08-01 14:54 评论0 收藏0
【第1期】聊聊css居中那点事

摘要：前言居中是网页布局中再常见不过的一种方式了，今天我们就来聊聊居中的那点事。我是水平居中的同样是针对块级元素才有效果。来看代码我是水平居中的必须配合来使用来可以实现居中的效果。方法二我是垂直居中的注意此方法要考虑的兼容性问题。前言：居中是网页布局中再常见不过的一种方式了，今天我们就来聊聊css居中的那点事。我们主要从这几个方面来了解下居中：水平居中垂直居中水平垂直居中水平...

刘永祥 2019-08-30 15:55 评论0 收藏0