面试题准备（二十三）：使盒子水平垂直居中的五种方法

最新推荐文章于 2023-11-03 10:33:06 发布

番茄味姜糖

最新推荐文章于 2023-11-03 10:33:06 发布

阅读量1.5k

点赞数 2

分类专栏： HTML&CSS 前端文章标签： css css3 前端 html5 html

本文链接：https://blog.csdn.net/weixin_46587293/article/details/123226295

版权

前端同时被 2 个专栏收录

24 篇文章 3 订阅

订阅专栏

HTML&CSS

14 篇文章 0 订阅

订阅专栏

HTML 结构

<head>
  <style>
    .wrapper {
      width: 500px;
      height: 300px;
      border: 2px solid #088;
      border-radius: 15px;
    }
    .content {
      width: 100px;
      height: 100px;
      background-color: #f88;

      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="content">我要居中</div>
  </div>
</body>

在这里插入图片描述

1. 使用 flex 实现

把父元素设置为 flex 或者 inline-flex，使其中的盒子沿主轴和交叉轴水平垂直居中

/* 给 wrapper 添加下类 */
.flex-style {
	display: flex;
	justify-content: center;
	align-items: center;
}

在这里插入图片描述

2. 使用 position + margin 负边距实现

适用于已知内部盒子宽高
给父元素设置相对定位，给子元素设置绝对定位
再让子元素沿上方和左方偏移 50% 的父元素高宽，但因为是根据左上角偏移的
所以要用负边距 margin 来修正，修正的大小为宽高的一半

/* 给 wrapper 添加下类 */
.position-style {
	position: relative;
}
/* 给 content 添加下类 */
.position-sub {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -50px 0 0 -50px;
}

在这里插入图片描述

3. 使用 position + transform 实现

适用于未知内部盒子宽高，已知亦可以
将上一个实现的 margin 改为 transform 即可

/* 给 wrapper 添加下类 */
.position-style {
	position: relative;
}
/* 给 content 添加下类 */
.position-sub {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

在这里插入图片描述

4. 使用 position + margin 填充实现

在子绝父相的基础上
使子元素上下作用的偏移均为 0
再让子元素自适应外边距 margin
注意：如果子元素的宽高是未设置的，则会填满整个父元素

/* 给 wrapper 添加下类 */
.position-style {
	position: relative;
}
/* 给 content 添加下类 */
.position-sub {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

在这里插入图片描述

5. 使用table-cell 实现

使用 table-cell，使父元素变为一个表格单元格，再用
vertical-align: middle;
text-align: center;
可使文字居中
这就要求中间的子元素需要有行级属性 inline 或 inline-

/* 给 wrapper 添加下类 */
.table-style {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
/* 给 content 添加下类 */
.table-sub {
	display: inline-flex;
}