CSS垂直居中的几个方法（适用于不知道父级盒子宽高的情况下垂直居中）

梦吉网络

于 2020-05-30 16:26:56 发布

阅读量598

点赞数 1

分类专栏：盒子布局垂直居中实现文章标签： css html css3 flex

本文链接：https://blog.csdn.net/f1661434531/article/details/106442876

版权

盒子布局同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

垂直居中实现

1 篇文章 0 订阅

订阅专栏

1.使用flex布局

该方法涉及到弹性布局，具体请参考阮一峰

Flex 布局教程：语法篇 - 阮一峰的网络日志

“display:flex”实现CSS水平居中的方案简单直接。

通过display:flex实现CSS垂直居中的方法是给父元素display:flex;

通过align-items: center;属性进行垂直居中

justify-content属性进行水平居中

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body,
			html {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			div {
				width: 100px;
				height: 100px;
				background: #64c5fd;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

2使用定位position

然后用transform: translate(x, y);

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body,
			html {
				width: 100%;
				height: 100%;
			}
			div {
				position: relative;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 100px;
				height: 100px;
				background: #64c5fd;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

3.外边距结合定位来实现,其实跟上一种很相似。

margin: 0 auto;实现垂直居中

position：relative;top:50%()

transform: translateY();

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body,
			html {
				width: 100%;
				height: 100%;
			}
			div {
				margin: 0 auto;
				position: relative;
				top: 50%;
				transform: translateY(-50%);
				width: 100px;
				height: 100px;
				background: #64c5fd;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

看了这么多代码，咱来看一下效果图哈~
在这里插入图片描述
以上为个人总结，欢迎各位补充~~~

梦吉网络

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS垂直居中的几个方法（适用于不知道父级盒子宽高的情况下垂直居中）

1.使用flex布局该方法涉及到弹性布局，具体请参考阮一峰Flex 布局教程：语法篇 - 阮一峰的网络日志“display:flex”实现CSS水平居中的方案简单直接。通过display:flex实现CSS垂直居中的方法是给父元素display:flex;通过align-items: center;属性进行垂直居中justify-content属性进行水平居中<!DOCTYPE html><html lang="en"> <head> <met
复制链接

扫一扫