设置块元素水平垂直居中方法五

chill_ly

已于 2022-03-01 20:29:22 修改

阅读量226

点赞数

分类专栏：一阶段文章标签： css elementui html

于 2022-03-01 20:27:21 首次发布

本文链接：https://blog.csdn.net/qq_53640252/article/details/123215000

版权

一阶段专栏收录该内容

13 篇文章 0 订阅

订阅专栏

使用网格布局

①设置大div为网格布局 display: grid;

②设置网格的行和列

grid-template-rows:

grid-template-columns:

③设置网格的区域名称 grid-template-areas:

如果某些单元格不放内容，则可以使用.来描述区域名称，表示无用区域

区域名称之间空格隔开

④指定小div占据哪个区域 grid-area:

<style>
        .big{
            width: 500px;
            height: 500px;
            border: 3px solid #f00;
            /* 设置为网格布局 */
            display: grid;

            /* 设置网格的行 */
            /* 方法一：设置(父元素的)几分之几 */
            grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
            /* 方法二：设置具体值 
            grid-template-rows: 100px 100px 100px 100px 100px; */
            /* 方法三：设置(父元素的)百分比 
            grid-template-rows: 20% 20% 20% 20% 20%; */
            /* 方法四：设置五行，每行均为100px （具体值和百分比可以混用）
            grid-template-rows: repeat(5,100px); */
            /* 方法五：设置自动划分，每行均为父元素的20% 
            grid-template-rows: repeat(auto-fill, 20%); */
            /* 方法六：设置前四行均为100px,最后一行自动填充
            grid-template-rows: repeat(4,100px) auto; */
            /* 方法七：设置前四行均为100px，
            ①当剩余距离小于最小值，且小于最大值，则使用最小值作为单元格的宽或高；
            ②当剩余距离大于最小值，且小于最大值，则使用剩余距离作为单元格的宽或高；
            ③当剩余距离大于最大值，且大于最小值，则使用最大值作为单元格的宽或高；
            grid-template-rows: repeat(4,100px) minmax(50px, 150px); */
            
            /* 设置网格的列 */
            /* 方法一：设置(父元素的)几分之几 */
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
            /* 方法二：设置具体值 
            grid-template-columns: 100px 100px 100px 100px 100px; */
            /* 方法三：设置(父元素的)百分比 
            grid-template-columns: 20% 20% 20% 20% 20%; */
            /* 方法四：设置五列，每列均为父元素的20% （具体值和百分比可以混用）
            grid-template-columns: repeat(5,20%); */
            /* 方法五：设置自动划分，每列均为父元素的20% 
            grid-template-columns: repeat(auto-fill, 20%); */
            /* 方法六：设置前四列均为100px,最后一列自动填充
            grid-template-columns: repeat(4,100px) auto; */
            /* 方法七：设置前四列均为100px，
            ①当剩余距离小于最小值，且小于最大值，则使用最小值作为单元格的宽或高；
            ②当剩余距离大于最小值，且小于最大值，则使用剩余距离作为单元格的宽或高；
            ③当剩余距离大于最大值，且大于最小值，则使用最大值作为单元格的宽或高；
            grid-template-columns: repeat(4,100px) minmax(50px, 150px); */
            
            /* 设置区域名称 */
            grid-template-areas: 
                                ". . . . ."
                                ". . . . ." 
                                ". . a . ."  
                                ". . . . ." 
                                ". . . . ." ;
        }
        .small{
            width: 100px;
            height: 100px;
            background-color: green;
            /* 指定占据区域a */
            grid-area: a;
        }
</style>
    <div class="big">
        <div class="small"></div>
    </div>