CSS3小技巧之块级元素左右垂直居中

最新推荐文章于 2021-08-17 17:14:15 发布

weixin_33752045

最新推荐文章于 2021-08-17 17:14:15 发布

阅读量97

点赞数

文章标签： python

原文链接：https://my.oschina.net/AaronDMC/blog/762002

版权

2019独角兽企业重金招聘Python工程师标准>>>

效果如下图所示：

方法一：实现代码如下：

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<style type="text/css">
			*{margin:0px;padding:0px;}
			.con{width:200px;height:200px;background:red;
                 position:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-100px;}
		</style>
		<title>块级元素左右垂直居中</title>
	</head>
	<body>
	  <div class="con"></div>
	</body>
</html>

方法二：实现代码如下：

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<style type="text/css">
			*{margin:0px;padding:0px;}
			.con{width:200px;height:200px;background:red;
                 position:absolute;top:0px;bottom:0px;left:0px;right:0px;margin:auto;}
		</style>
		<title>块级元素左右垂直居中</title>
	</head>
	<body>
	  <div class="con"></div>
	</body>
</html>

转载于:https://my.oschina.net/AaronDMC/blog/762002