div垂直居中方式

最新推荐文章于 2024-07-16 17:16:30 发布

SuperYiY

最新推荐文章于 2024-07-16 17:16:30 发布

阅读量551

点赞数 6

文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_44786330/article/details/135667926

版权

本文介绍了CSS中各种布局技术，如flex弹性布局、table-cell垂直对齐、line-height配合vertical-align、绝对定位及其变种、网格布局(grid)，展示了如何灵活运用这些技术实现页面元素的精确定位。

摘要由CSDN通过智能技术生成

1、flex弹性布局：

 		.father {
            width: 300px;
            height: 300px;
			display:flex;
			justify-content:center;
			align-items:center; 
        }

        .box {
            width: 100px;
            height: 100px;
        }

2、table-cell+vertical-align 类似td表格单元

 		.father {
            width: 300px;
            height: 300px;
			display:table-cell;
			vertical-align:middle;
			text-align:center;
        }

        .box {
            width: 100px;
            height: 100px;
			display:line-block；
        }

3、line-height+vertical-align

 		.father {
            width: 300px;
            height: 300px;
			line-height:300px;
			text-align:center;
        }

        .box {
            width: 100px;
            height: 100px;
			vertical-align:middle;
			display:line-block;
        }

4、absolute+transform

 		.father {
            width: 300px;
            height: 300px;
            position: relative;
        }

        .box {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            /*平移*/
            transform: translate(-50%,-50%);
        }

5、absolute+负margin

 		.father {
            width: 300px;
            height: 300px;
            position: relative;
        }

        .box {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            /*宽高的一半*/
            margin-left: -50px;
            margin-top: -50px;
        }

6、absolute+margin

 		.father {
            width: 300px;
            height: 300px;
            position: relative;
        }

        .box {
            width: 100px;
            height: 100px;
            position: absolute;
			left: 0;
            top: 0;
            bottom:0;
            right:0;
            margin:auto;;
        }

7、grid

 		.father {
            width: 300px;
            height: 300px;
            display: grid;
        }

        .box {
            width: 100px;
            height: 100px;
            align-self: center;
            justify-self: center;
        }