水平垂直居中

MingjunYang 发布于2019-08-29 11:29 / 453人阅读

摘要：它为什么备受关注并不是因为它难实现，而是因为实现的策略太多了，让人无可下手，无可选择。多行块级元素实现原理同水平居中的水平垂直居中综合运用水平垂直居中即可。

它为什么备受关注？

并不是因为它难实现，而是因为实现的策略太多了，让人无可下手，无可选择。

将各个问题分类，给出常用解

水平居中 行内元素： text-align:center

html:


   text-align:center

css:

div{
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
    text-align: center;
}
a{
    color: #000;
}

单行块级元素 已知宽：margin：0 auto；

html：


    width:200px;
    margin：0 auto；

css:

div{
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
    width :200px;
    margin: 0 auto;
}

当它是float的时候，效果并不理想！
float:left;

已知宽:position : absolute;

html:


    position: absolute;

    width :300px;

    left: 50%;

    margin-left: -150px;

css:

div{
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
    position: absolute;
    width :300px;
    left: 50%;
    margin-left: -150px;
}

不需要已知宽：position：absolute;

html:


    position: absolute;

    left: 50%;

    transform: translateX(-50%);

css:

div{
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

多行块级元素 display : flex;

html:


    
        display:flex;
    
    
        display:flex;
    
    
        display:flex;
    
    
        display:flex;

css:

.parent{
    display: flex;
    justify-content: center;
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
}
.child{
    background-color: #cbcbcb;
    padding: 0 20px;
}

display : inline-block;

html：


    
        display:inline-block;
    
    
        display:inline-block;
    
    
        display:inline-block;
    
    
        display:inline-block;

css：

.parent{
    text-align: center;
    padding: 0;
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
}
.child{
    display: inline-block;
    background-color: #cbcbcb;
    padding: 0 20px;
}

小问题

有没有发现，inline-blodk之间是有边距的？这可不是bug,是因为元素之间存在空格，如何去消除呢？去除inline-block元素间间距的N种方法

垂直居中 行内元素 padding：30px 0;

html:

padding-top: 30px 0;

css:

p{
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
    padding: 30px 0;
}
a{
    color:#000;
}

line-height : height;

html:


    
        height: 100px;
        line-height: 100px;

css:

p{
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
    height: 100px;
    line-height: 100px;
}
a{
    color: #000;
}

多行行内元素 vertical : middle;

html:


    
        
            default:

                vertical:middle

css:

div{
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
}
table{
    height: 100px;
}

display : flex;

html:


    
        display:flex

        flex-direction: column;

        justify-content: center;

css:

div{
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
a{
    color: #000;
}

加入幽灵元素

html:


    
        display:flex

        flex-direction: column;

        justify-content: center;

css:

.ghost{
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
    height: 100px;
}
.ghost:before{
    content: "";
    display: inline-block;;
    height: 100%;
    width: 1%;
    vertical-align: middle;
}
a{
    display: inline-block;
    vertical-align: middle;
    color: #000;
}

单行块级元素

实现原理同水平居中。

多行块级元素

实现原理同水平居中的display：flex;

水平垂直居中

综合运用水平垂直居中即可。

参考资料

Centering in CSS: A Complete Guide
Flexbox详解

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

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

转载请注明本文地址：https://www.ucloud.cn/yun/111678.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进行下面三种方案平常都很少被使用的到 ...

incredible 2019-08-30 12:43 评论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