垂直居中方法

一蓑烟雨..

于 2021-04-07 16:07:39 发布

阅读量163

点赞数

分类专栏： html\css 文章标签： css html

本文链接：https://blog.youkuaiyun.com/weixin_44713688/article/details/115486928

版权

html\css 专栏收录该内容

17 篇文章

订阅专栏

该博客介绍了两种实现前端页面元素垂直居中的方法：一是通过Flex布局，利用`justify-content`和`align-items`属性；二是采用绝对定位，结合`margin`负值和`transform`的`translate`属性。这两种方法都有效地将`.box1`元素在`.box`容器内实现了垂直居中显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端页面垂直居中：

display：flex

		.box{
            width:300px;
            height:300px;
            
			display:flex;
            justify-content:center;
            align-items:center;
            
            background-color: lightslategray;
        }
        .box1{
            height:100px;
            width:100px;
            background-color: lightsteelblue;
        }

先整体移动50%，再移动自身的50%

		*{
            background-color: lightslategray;
        }
        .box{
            height: 300px;
            width: 300px;
            background-color: lightsteelblue;
            
            position: absolute;
            left: 50%;
            top: 50%;

            margin-top: -150px;
            margin-left: -150px; //自身的一半
            /* transform: translate(-50%,-50%); */ //换成这个效果一样
            
           
        }