CSS垂直水平居中

bestyinjun

已于 2023-07-31 08:32:55 修改

阅读量45

点赞数

分类专栏： css 文章标签： css 前端

于 2023-07-26 14:45:07 首次发布

本文链接：https://blog.csdn.net/bestyinjun/article/details/131934441

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

我们在进行网页排版布局的时候一定会遇到垂直水平居中的问题，本文介绍几个好用的方法。

为演示方便首先建立如下父子关系代码，我们对他们分别设置了宽高和背景色（实际上宽高很有可能不确定，接下来继续分析）。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
		  .parent {
			  width: 500px;
			  height: 500px;
			  background-color: orange
		  }
		  .son {
			  width: 100px;
			  height: 100px;
			  background-color: green;
		  }
		</style>
	</head>
    <body>
		<div class='parent'>
		    <div class='son'>
		</div>
    </body>
</html>

一、当父子元素宽高都不确定的情况

1. 使用绝对定位 + transform

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

2. 使用绝对定位 + margin: auto

.son {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin:auto;
}

二、当子元素宽高确定的情况

使用绝对定位 + margin

.son {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -50px; // 子元素一半高度
	margin-left: -50px; // 子元素一半宽度
}

三、当父元素宽高部分确定的情况

1. 父元素使用flex布局，并设置相关的属性值为center（该方法只要父元素高度确定即可）

.parent{
    display: flex;
    justify-content: center; // 水平居中
    align-items: center; // 垂直居中
    height: 500px;
}

2. 使用table-cell实现（该方法需要父元素宽高都确定，并且子元素要设置成行内块状元素）

.parent{
    display: table-cell;
    vertical-align: middle; // 垂直居中
    text-align: center; // 水平居中
    width: 500px;
    height: 500px;
}

.son {
    display: inline-block; // 行内块状元素
}

3. 使用grid布局（该方法只要父元素高度确定即可）

.parent{
    display: grid;
    height: 500px;
}

.son {
    align-self: center; // 垂直居中
    justify-self: center; // 水平居中
}

四、当父子元素宽高都确定的情况

不用说了，你肯定知道该怎么做

总结

从今往后水平垂直居中对你来说手到擒来

bestyinjun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录