居中方法

最新推荐文章于 2022-08-15 21:57:55 发布

mustang(野马）

最新推荐文章于 2022-08-15 21:57:55 发布

阅读量190

点赞数

分类专栏： css样式 html 文章标签：居中元素居中源集科技

本文链接：https://blog.csdn.net/weixin_45000381/article/details/90146978

版权

css样式同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

html

7 篇文章 1 订阅

订阅专栏

居中方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*第一种居中办法*/
			#box{ margin: 60px auto;
				  width: 600px;
				  height: 500px;
				  background: darkgray;
				  position: relative;
				  }
				.box1{ width: 300px;
					  height: 300px;
					  background: yellow;
					  position: absolute;
					  left: 50%;
					  top: 50%;
					  margin-left: -150px;
					  margin-top: -150px;
					  }
				/*第二种居中的办法*/
			.tu{margin: 60px auto;
				width: 600px;
				height: 500px;
				border: 1px solid darkgoldenrod;
				position: relative;
				}
			.tu img{ display: block;
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					margin: auto;}
				
		</style>
	</head>
	<body>
		<!--
        	作者：1600834563@qq.com
        	时间：2019-05-08
        	描述：第一种居中办法
        -->
		<div id="box">
			<div class="box1"></div>
			
		</div>
		<!--
        	作者：1600834563@qq.com
        	时间：2019-05-08
        	描述：第二居中办法
        -->
        <div class="tu">
        	<img src="img/s1508271f1.jpg"/>	
        </div>
	</body>
</html>

效果图：

在这里插入图片描述

mustang(野马）

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
居中方法

居中方法<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*第一种居中办法*/ #box{ margin: 60px auto; widt...
复制链接

扫一扫