令人窒息的垂直居中

最新推荐文章于 2023-06-30 18:20:54 发布

Y_G_G

最新推荐文章于 2023-06-30 18:20:54 发布

阅读量170

点赞数 1

分类专栏： PC_Wiki 文章标签：水平垂直居中 transform css 居中

本文链接：https://blog.csdn.net/Y_G_G/article/details/86010134

版权

PC_Wiki 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

平时工作中，经常会遇到各种居中的问题。水平居中，给父元素设置 text-align:center，就可以实现，但是垂直居中 emmm…
今天来总结我用过的垂直居中：
首先明确一件事情，padding，margin的百分比值，无论上下左右，都是根据父元素的宽度来定！

针对固定宽高元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body {
			background-color: yellow;
		}
		main {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 20em;
			height: 10em;
			margin-top: -5em;
			margin-left: -10em;
			background: #da9215; 
		}
       /*还可以再简约*/
		/*main {
			position: absolute;
			top: calc(50% - 5em);
			left: calc(50% - 10em);
			width: 20em;
			height: 10em;
			background: #da9215; 
		}*/
	</style>
</head>
<body>
	<main>
		<p>我们的目标是：</p>
		<h1>水平垂直居中</h1>
	</main>
</body>
</html>

在这里插入图片描述

宽高不确定的元素 - transform （还可以用来实现0.5px像素的线）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body {
			background-color: yellow;
		}
		main {
			position: absolute;
			background-color: #fff;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	</style>
</head>
<body>
	<main>
		<p>我们的目标是：</p>
		<h1>水平垂直居中</h1>
	</main>
</body>
</html>

宽高不确定的元素 - vh

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body {
			background-color: yellow;
		}
		main {
			width: 20em;
			background-color: gray;
			margin: 50vh auto 0;
			transform: translateY(-50%);
		}
	</style>
</head>
<body>
	<main>
		<p>我们的目标是：</p>
		<h1>水平垂直居中</h1>
	</main>
</body>
</html>

宽高不确定的元素 - flex布局（推荐）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body {
			background-color: yellow;
			display: flex;
		}
		main {
			margin: auto;
		}
	</style>
</head>
<body>
	<main>
		<p>我们的目标是：</p>
		<h1>水平垂直居中</h1>
	</main>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body {
			background-color: yellow;
			display: flex;
			min-height: 100vh;
			align-items: center;
			justify-content: center;
		}
	</style>
</head>
<body>
	<main>
		<p>我们的目标是：</p>
		<h1>水平垂直居中</h1>
	</main>
</body>
</html>

在这里插入图片描述

Y_G_G

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
令人窒息的垂直居中

平时工作中，经常会遇到各种居中的问题。水平居中，给父元素设置 text-align:center，就可以实现，但是垂直居中 emmm…今天来总结我用过的垂直居中：针对固定宽高元素&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;U
复制链接

扫一扫

专栏目录