内联(行元素)与块的上下左右剧中布局

花殇

已于 2023-03-29 19:42:40 修改

阅读量86

点赞数

分类专栏： css 移动端文章标签： css css3 html

于 2023-03-29 19:24:59 首次发布

本文链接：https://blog.csdn.net/2302_76953773/article/details/129843486

版权

移动端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

内联剧中

样式：

   /* 行元素的剧中 */

        /* 第一种 */

        /*     .box{

            width: 300px;

            height: 300px;

            background-color: aqua;

            display: flex;

             针对行

            align-items: center;

        } */

        /* 第二种 */

        /*  .box{

            width: 300px;

            height: 300px;

            background-color: aqua;

            display: flex;

            flex-wrap: wrap;

            针对的是整体

            align-content: center;

        } */

        /* 第三种  行高的方式---针对一行  多行不合适*/

        /*   .box{

            width: 300px;

            height: 300px;

            background-color: aqua;

            line-height: 300px;

        } */

        /* 第四种  display: table-cell; */

        /*   .box{

            width: 300px;

            height: 300px;

            background-color: aqua;

            display: table-cell;

            vertical-align: middle;

        } */

结构：

  <div class="box">

测试文字测试文字测试

测试文字测试文字测试

测试文字测试文字测试

测试文字测试文字测试

测试文字测试文字测试

测试文字测试文字测试

测试文字测试文字测试

测试文字测试文字测试

测试文字测试文字测试

测试文字测试文字测试

测试文字测试文字测试

</div>

块元素剧中

/* 第一种 */

        /* .box{

            width: 300px;

            height: 300px;

            background-color: aqua;

            display: flex;

            justify-content: center;

            align-items: center;

        }

        .box div{

            width: 100px;

            height: 100px;

            background-color: black;

        } */



        /* 第二种 */

        /* .box{

            width: 300px;

            height: 300px;

            background-color: aqua;

            display: flex;

            position: relative;

        }

        .box div{

            width: 100px;

            height: 100px;

            background-color: black;

            margin: auto;

        } */



        /* 第三种 */

        /* .box{

            width: 300px;

            height: 300px;

            background-color: aqua;

            position: relative;

        }

        .box div{

            width: 100px;

            height: 100px;

            background-color: black;

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            margin: auto;

        } */

        /* 第四种 定位+外边距  */    

        /* 第五种  定位+动画中的位移 */

结构：

<div class="box">

        <div></div>