补充：水平垂直居中的几种方法

最新推荐文章于 2023-08-22 20:00:00 发布

八百比晴明

最新推荐文章于 2023-08-22 20:00:00 发布

阅读量139

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签：前端开发语言 html css css3

本文链接：https://blog.csdn.net/m0_51981718/article/details/123908371

笔记专栏收录该内容

8 篇文章

订阅专栏

本文介绍了五种不同的布局方法：绝对定位配合transform实现灵活中心对齐，margin: auto适应固定宽高的居中，以及使用flex和grid实现快速、直观的元素定位。这些技术适用于不同场景，无论定宽高还是不固定，都能轻松实现元素在页面上的居中和分布。

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

一、利用绝对定位，设置 left: 50% 和 top: 50% 现将子元素左上角移到父元素中心位置，然后再通过 translate 来调整子元素的中心点到父元素的中心。该方法可以不定宽高。

.father{
	position:relative;
}
.son{
	position:absolute;
	left:50%
	top:50%
	transform:translate(-50%,-50%)
}

二、利用绝对定位，子元素所有方向都为 0 ，将 margin 设置为 auto ，由于宽高固定，对应方向实现平分，该方法必须盒子有宽高。

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

三、利用绝对定位，设置 left: 50% 和 top: 50% 现将子元素左上角移到父元素中心位置，然后再通过 margin-left 和 margin-top 以子元素自己的一半宽高进行负值赋值。该方法必须定宽高。

.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
}

四、利用 flex ，最经典最方便的一种了，不用解释，定不定宽高无所谓的。

.father {
  display: flex;
  justify-content: center;
  align-items: center;
}

五、grid布局(兼容性较差)

.father{
	width: 200px;
    height: 200px;
    border: 1px solid red;
    display: grid;
}
.son{
	width: 100px;
    height: 100px;
    background: yellow;
    margin: auto;
}