精华内容
下载资源
问答
  • 一、flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row-reverse (与row 相反)  ※ flex-direction:column (从上往下排列==顶对齐) ※ flex-...
  • 利用flex实现元素水平垂直居中

    千次阅读 2019-07-19 13:43:39
    首先介绍一下flex布局。...容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框 的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始...

    首先介绍一下flex布局。

    采用Flex布局的元素,称为Flex容器(flex container),简称“容器”。它的所有子元素自动成为容器成员,成为flex项目(flex item),简称“项目”。

    在这里插入图片描述
    容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框 的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

    利用flex实现元素水平垂直居中的两种方法:

    html如下:

    <div class="father">
        <div class="son">
        </div>
    </div>
    

    第一种方法(新方法)

    父元素(容器)设置display属性为flex,并设置水平主轴上的元素居中,垂直交叉轴上的元素居中。

    *{
        margin: 0;
        padding: 0
    }
    .father{
        width: 400px;
        height: 400px;
        border: 1px dashed black;
        display: flex;/*父元素设置flex属性*/
        justify-content: center;/*水平主轴居中*/
        align-items: center;/*垂直交叉轴居中*/
    }
    .son{
        width: 100px;
        height: 50px;
        background: pink;
    }
    

    第二种方法(老方法)

    父元素(容器)设置display为-webkit-box,并设置水平主轴上的元素居中,垂直交叉轴上的元素居中。

    *{
        margin: 0;
        padding: 0
    }
    .father{
        width: 400px;
        height: 400px;
        border: 1px dashed black;
        display: -webkit-box;
        -webkit-box-pack: center;
        -webkit-box-align: center
    }
    .son{
        width: 100px;
        height: 50px;
        background: pink;
    }
    

    上述两种方法效果是相同的,如下所示:
    在这里插入图片描述
    其实以上两种方法都是在父元素中分三步来实现,不过个人认为,还是新方法更好记一点儿吧,建议使用第一种方法。

    展开全文
  • flex布局 任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 行内元素也可以使用Flex布局。 .box{ display: inline-flex; } Webkit内核的浏览器,必须加上-webkit前缀。 .box{ display: -webkit-flex; /* ...

    flex布局
    任何一个容器都可以指定为Flex布局。

    .box{
    display: flex;
    }
    行内元素也可以使用Flex布局。

    .box{
    display: inline-flex;
    }
    Webkit内核的浏览器,必须加上-webkit前缀。

    .box{
    display: -webkit-flex; /* Safari */
    display: flex;
    }
    注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
    详细请参考 https://www.runoob.com/w3cnote/flex-grammar.html

    <html>
    <head></head>
    <style>
        * {
            margin: 0px;
            padding: 0px
        }
    
        body {
            display: flex;
            align-items: center; /*定义body的元素垂直居中*/
            justify-content: center; /*定义body的里的元素水平居中*/
        }
    
        body div {
            display: flex;
            align-items: center; /*定义body的元素垂直居中*/
            justify-content: center; /*定义body的里的元素水平居中*/
    
        }
    </style>
    <body>
    <div style="width: 800px;height: 800px;background-color: whitesmoke;margin: auto;">
        <div style="width:700px;height: 700px;background-color: honeydew;margin: auto;text-align: center;">
            <div style="width:600px;height: 600px;background-color: #c0c4cd;margin: auto;text-align: center;">
                <div style="width:500px;height: 500px;background-color: coral;margin: auto;text-align: center;">
                    <div style="width:400px;height: 400px;background-color: cadetblue;margin: auto;text-align: center;">
                        <div style="width:300px;height: 300px;background-color: black;margin: auto;text-align: center;">
                            <div style="width:200px;height: 200px;background-color: blue;margin: auto;text-align: center;">
                                <div style="width:100px;height: 100px;background-color: red;margin: auto;text-align: center;">
                                    <span></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • 实现水平与垂直居中水平居中行内元素块级元素垂直居中单行文本的水平垂直居中多行文本的水平垂直居中块级元素水平垂直居中固定宽高的水平垂直居中不固定宽高的水平垂直居中基于Flex实现水平垂直居中橘子很甜。...

    水平居中

    行内元素

    text-align:center;
    

    块级元素

    定宽:可以采取决定定位的方式实现
    .center {
        width: 960px;
        position: absolute;
        left: 50%;
        margin-left: -480px;
     }
     
     不定宽:借助css3的变形属性Transform来完成
     .content {
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
     }
    

    垂直居中

    单行文本的水平垂直居中

    元素的高度和行高相等时,文本呈现垂直居中  height == line-height  高等于行高
    

    多行文本的水平垂直居中

    不固定高度的垂直居中
    	通过设置padding实现
    固定高度的垂直居中
    	使用display设置为 table-cell, 配合样式vertical-align设置为middle来实现table-cell:以表格单元格的形式来解析代码
    

    块级元素水平垂直居中

    固定宽高的水平垂直居中

    .content {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }
    

    不固定宽高的水平垂直居中

    .content {
           position: absolute;
            left: 50%;
            top: 50%;
            /* 左/上边缘向左/上移动自身宽/高度的一半 */
            transform: translate(-50%, -50%);
        }
    
    

    基于Flex实现水平垂直居中

    移动端开发中的最佳解绝方案

    .content {
             /*转为flex弹性盒布局*/
            display: flex;
            /*主轴上的对齐方式为居中*/
            justify-content: center;
            /*交叉轴上对齐方式为居中*/
            align-items: center;
        }
    
    

    橘子很甜。@快乐养兔

    展开全文
  • 把容器设置为flex布局,justify-content属性可以实现水平居中,align-items属性可以实现垂直居中。通过一个简单例子一看就明白了。 <html> <head> <style type="text/css"> #app{ width: ...

    把容器设置为flex布局,justify-content属性可以实现水平居中,align-items属性可以实现垂直居中。通过一个简单例子一看就明白了。

    <html>
     
    <head>
    <style type="text/css">
    
    #app{
        width: 600px;
        height: 600px;
        outline: red dotted 3px;   
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #content{
        width: 200px;
        height: 200px;
        background-color: green;
    }
    </style>
    </head>
     
    <body>
    
        <div id="app">
            <div id="content"></div>
        </div>
        
    <script>
        
    </script>
    </body>
    </html>
    

    效果如下:

    展开全文
  • 通过Flex布局设置水平垂直居中

    万次阅读 2019-05-01 15:56:48
    实现代码: 通过给父元素设置CSS样式: display:flex; align-items:center; justify-content:center; //HTML <div class='box'> <div class='box-item'> </div> </div> //css .box{...
  • 垂直水平居中实例 Html代码 <div id="box"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div&...
  • 谈谈flex布局实现水平垂直居中

    千次阅读 2020-02-28 22:09:33
    我们在这要谈的是用flex布局来实现水平垂直居中。随着移动互联网的发展,对于网页布局来说要求越来越高,而传统的布局方案对于实现特殊布局非常不方便,比如垂直居中。所以09年,W3C 提出了一种新的方案----Flex ...
  • <h1>flex弹性布局justify-content属性实现元素水平居中 <h1>flex弹性布局justify-content属性实现元素水平居中 css .box { display: flex; justify-content: center; width: 100%; background: #0099cc...
  • Flex实现水平竖直居中布局传统的布局使用的是“盒模型”加上display、position和float属性,但是对于一些特殊的布局实现例如居中却是比较麻烦,所以,为了解决一些复杂的布局问题,一种更为灵活的布局方式出现了,那...
  • 1、Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状...容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main en
  • 1.使用flex实现,box为父容器,tes为子容器 #box{ display: flex; height: 700px; width: 700px; background-color: brown; justify-content: center; ...
  • 更多关于flex布局可以参考这篇博文:...使用flex实现元素的水平居中垂直居非常方便 水平居中: .box{ display: flex; justify-content: center; } 垂直居中 .box { display: fle...
  • body,div{margin:0px;....flex-container{display:flex;height:300px;background-color:#ddd;justify-content:center;align-items:center;} .item{padding:6px;width:200px;height:200px;} .item1{b...
  • css3 flex 详解,可以实现div内容水平垂直居中
  • display: flex; 子元素添加 align-self: center 示例 <div class='father'> <div class='child'></div> </div> <style> .father { background: #ff6b89; height: 600px; ...
  • flex实现水平垂直居中

    2021-04-13 21:14:24
    实现水平居中 父级元素使用align-items: center;实现垂直居中 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta ...
  • flex布局水平垂直居中

    2020-02-28 22:41:12
    2、给父元素添加 justify-content 属性 (水平居中) justify-content 属性决定了主轴方向上子项的对齐和分布方式 justify-content: center 3、给父元素添加 align-items 属性(垂直居中) align-items : 每一行中的...
  • Flex实现元素的水平居中垂直居中

    万次阅读 2018-03-26 17:20:41
    水平居中justify-content属性定义了项目在主轴(水平)上的对齐方式。justify-content可取值:flex-start(默认值):左对齐flex-end:右对齐center: 居中space-between:两端对齐,项目之间的间隔都相...
  • 使用flex布局实现div水平垂直居中CSS3.0弹性布局:flex布局 CSS3.0弹性布局:flex布局 <body> <div class="parent"> <div class="center">123</div> </div> </body> 定义一...
  • body{ display: flex; display: -webkit-flexflex-direction: row columncolumn-reverserow-reverse /*调节布局元素的方向*/ flex-wrap:nowrapwrapwrap-reverse/*换行属性*/...justify-content:/*水平居中*/...
  • CSS实现垂直水平居中

    千次阅读 2018-06-11 16:45:48
    面试中常常被问到,如何使用css来实现一个元素的垂直水平方向上居中,特别是笔试题的时候,这道题目的出现频率还是比较高的,当然,在我们的生活中,也常常会有垂直水平居中的需求。 css实现垂直水平居中的三种方案...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>... .
  • flex设置水平垂直居中

    千次阅读 2018-12-03 19:09:53
    .father { width: 400px; height: 400px; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: red; } .son { width:...
  • css flex布局实现文字垂直居中

    千次阅读 2021-01-05 10:23:05
    <style>... display: flex; background-color: #ea4d22; height: 100px; /* line-height: 100px; */ /* text-align: center; */ justify-content: center; flex-direction: column; } .i.
  • 常用的flex布局介绍1.flex-directionflex-direction:row;(==默认==)flex-direction:row-reverse;flex-direction:column;flex-direction:column-reserve;2.flex-wrapflex-wrap:nowrap;(==不换行,默认==)flex-wrap:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,538
精华内容 9,415
关键字:

flex实现垂直水平居中