L - 居中布局

coolpail 发布于2019-08-30 14:22 / 778人阅读

摘要：水平居中先给出结构我是子元素方法将子元素转换为行内元素将子元素设置为这样既可以像块元素一样设置盒模型，又可以像行内元素一样试用进行居中将子元素设置为后，子元素为块级元素，宽度为内容宽度方法将子元素转换为元素是块级元素，宽度自适

水平居中

先给出HTML结构

    
        我是子元素

方法1. 将子元素转换为行内元素

    .par{
        text-align: center;
    }
    .child{
        background-color: tomato;
            
        display:inline-block;
    }

将子元素设置为inline-block这样既可以像块元素一样设置盒模型，又可以像行内元素一样试用text-align：center进行居中

将子元素设置为inline-block后，子元素为块级元素，宽度为内容宽度

方法2. 将子元素转换为table

    .par{

    }
    .child{
        background-color: tomato;
            
        display:table;
        margin:0 auto;
    }

table元素是块级元素，宽度自适应为内容宽度，所以通过display:table对子元素进行转换并设置块元素居中标配margin:0 auto

方法3. 使用position+transform组合

    .par{
        position: relative;
    }
    .child{
        background-color: tomato;
        width:300px;

        position: absolute;
        left:50%;
        transform: translateX(-50%);
    }

由于子元素是个块级元素(div)，默认占满父元素宽度，所以我们将子元素宽度设为300px

原理很简单，先用绝对定位将子元素置于距父元素左边界一半的位置，然后再将子元素向左移动自身的一半，达到居中效果

注意，position:relative将父元素设为子元素绝对定位的参照物

方法4. 利用flex布局的justify-content

    .par{
        display:flex;
        justify-content: center;
    }
    .child{
        background-color: tomato;
    }

由于flex-grow属性默认值为0，flex-basis属性默认值为auto，所以宽度为内容宽度(在没有设置指定值时，否则为指定值)

顺便说一句，flex很强大

垂直居中

高度为元素高度，就不指定具体值了

方法1. 父元素转换为table-ceil

    .par{
        height:500px;

        display:table-cell;
        vertical-align:middle;
    }
    .child{
        background-color: tomato;
    }

子元素宽度为内容宽度，父元素宽度为子元素宽度

方法2. 利用position+transform组合

    .par{
        height:500px;

        position: absolute;
    }
    .child{
        background-color: tomato;
        width:300px;
        
        position: absolute;
        top:50%;
        transform: translateY(-50%);
    }

不指定子元素宽度的话，子元素的内容将纵向展示

方法3. 使用flex布局的align-items

    .par{
        height:500px;

        display:flex;
        align-items:center;
    }
    .child{
        background-color: tomato;
        width:300px;
    }

水平垂直居中

上述两种居中布局的结合

方法1. 使用inline-block+text-align+table-cell+vertical-align

    .par{
        width:500px;
        height:500px;
        border:1px solid #ccc;

        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }
    .child{
        background-color: tomato;
        width:300px;

        display:inline-block;
    }

方法2. 利用position+transform组合

    .par{
        width:500px;
        height:500px;
        border:1px solid #ccc;

        position: relative;
    }
    .child{
        background-color: tomato;
        width:300px;

        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
    }

方法3. 使用flex布局

    .par{
        width:500px;
        height:500px;
        border:1px solid #ccc;

        display:flex;
        justify-content: center;
        align-items: center;
    }
    .child{
        background-color: tomato;
        width:300px;
    }

有问题欢迎提问，实践出真知

云服务器 GPU云服务器布局居中水平居中布局 Layout布局 linearlayout布局

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

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

《css揭秘》下（伪元素，文字背景，垂直居中技巧，文字环绕）

摘要：本篇主要记录揭秘一书中后面几章的常用技巧。文字环绕的重点在于即文字围绕着路径来显示。本篇主要记录《CSS3揭秘》一书中后面几章的常用技巧。 1、伪元素换行先看下HTML代码，如下当爱的故事剩听说我找不到你单纯的面孔默认显示效果：一般情况下，我们喜欢直接在第一个span元素后面加个换行符，但是它对于语义来说并不友好,或者将第一...

longmon 2019-04-23 13:14 评论0 收藏0
div+css图片列表布局（一）

摘要：接下来我会以行列的图片列表为列子介绍两种常用的切图方案布局布局首先来讲布局的方法布局非常简单，一般我会使用布局然后给每个元素定一个宽度并向左浮动。是不是很简单详细代码可以参考下一篇文章图片列表布局二关注作者吧前端切图的时候经常会遇到图片布局，初学者可能会比较生疏。接下来我会以3行3列的图片列表为列子介绍两种常用的切图方案： showImg(https://segmentfault.c...

Travis 2019-08-30 13:20 评论0 收藏0
div+css图片列表布局（一）

摘要：接下来我会以行列的图片列表为列子介绍两种常用的切图方案布局布局首先来讲布局的方法布局非常简单，一般我会使用布局然后给每个元素定一个宽度并向左浮动。是不是很简单详细代码可以参考下一篇文章图片列表布局二关注作者吧前端切图的时候经常会遇到图片布局，初学者可能会比较生疏。接下来我会以3行3列的图片列表为列子介绍两种常用的切图方案： showImg(https://segmentfault.c...

ThreeWords 2019-08-01 16:10 评论0 收藏0
css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0
FE.CSS-理解Matrix,Flex,Grid

摘要：理解中有这么几个属性方法斜拉缩放旋转位移其实找到旧像素位置与新像素位置的关系就可以用表示。当网格项目多于网格中的单元格或网格项目放置在显式网格之外时，将创建隐式轨道。理解transform:matrix matrix transform中有这么几个属性方法 skew(35deg)/*斜拉*/ scale(1, 0.5)/*缩放*/ rotate(45deg)/*旋转*/ transl...

qujian 2019-08-30 15:55 评论0 收藏0