盒子垂直水平对齐

最新推荐文章于 2022-10-12 09:37:29 发布

如鹰展翅上腾

最新推荐文章于 2022-10-12 09:37:29 发布

阅读量265

点赞数

分类专栏： html+css排版部分

本文链接：https://blog.csdn.net/wdq121516/article/details/99413293

版权

html+css排版部分专栏收录该内容

11 篇文章 0 订阅

订阅专栏

盒子垂直水平对齐

第一种：已知盒子具体宽高,利用浏览器容错机制居中，和第三种类似

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background: red;
				position: fixed;
				left: 0px;
				right: 0px;
				bottom: 0px;
				top: 0px;
				margin: auto;
				/*利用的是浏览器的容错机制*/
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

第二种

代码：已知盒子大小，进行位置微调居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background: red;
				position: fixed;
			    left: 50%;
			    top: 50%;
			    margin-left: -100px;
			    margin-top: -100px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

第三种:不知道宽度，利用浏览器自动识别计算居中

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				height: 200px;
				background: red;
				position: fixed;
				left: 100px;
				right: 100px;
				top: 0px;
				bottom: 0px;
				margin: auto;
	
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

第四种：已知宽高，利用calc自动计算居中，是微调的优化。

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				height: 200px;
				width: 200px;
				background: red;
				position: fixed;
				left: -webkit-calc(50% - 100px);
				top: -webkit-calc(50% - 100px);
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

如鹰展翅上腾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
盒子垂直水平对齐

盒子垂直水平对齐第一种：已知盒子具体宽高,利用浏览器容错机制居中，和第三种类似代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px;...
复制链接

扫一扫