div 居中的几种方法

最新推荐文章于 2025-06-06 22:51:36 发布

原创最新推荐文章于 2025-06-06 22:51:36 发布 · 1k 阅读

CC 4.0 BY-SA版权

本文介绍了CSS布局中常见的三种元素居中对齐的方法：使用Flexbox布局，通过设置`display: flex`及`justify-content`和`align-items`属性实现；使用绝对定位，结合`position: absolute`，`top`, `bottom`, `left`和`right`属性；以及利用`transform`的`translate`方法，通过`transform: translate(-50%, -50%)`进行居中调整。这三种方法在不同场景下各有优势，能够满足各种页面布局需求。

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

第一种：display：flex

//html
<div className="parent">
	<div className="child"></div>
</div>
//css
.parent{
	height:100%;
	border:1px solid green;
	 display: flex;
     justify-content: center;
     align-items: center;
     border: 1px solid green;
     .child{
         height: 100px;
         width: 100px;
         background: chocolate;
    }
}

第二种：position

.parent {
    height: 100%;
   position: relative;
   border: 1px solid green;
    .child{
        height: 100px;
        width: 100px;
        background: chocolate;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin:auto
    }
}

第三种：transform

.parent {
    height: 100%;
   position: relative;
   border: 1px solid green;
    .child{
        height: 100px;
        width: 100px;
        background: chocolate;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
}