CSS垂直水平居中

效果图:

列出两种写法:

1.父元素规定子元素内容垂直居中

display: flex;
align-items: center;
justify-content: center;
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.block {
				height: 300px;
				width: 300px;
				border: 1px solid #FF0000;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.item {
				width: 100px;
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="block">
			<div class="item">
				实现30秒倒计时
				实现30秒倒计时
			</div>
		</div>
	</body>
</html>

2.子元素自己垂直水平居中

position:relative;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.block {
				height: 300px;
				width: 300px;
				border: 1px solid #FF0000;
			}
			.item {
				width: 100px;
				color: red;
				position:relative;
				left: 50%;
				top: 50%;
				transform:translate(-50%,-50%);
			}
		</style>
	</head>
	<body>
		<div class="block">
			<div class="item">
				实现30秒倒计时
				实现30秒倒计时
			</div>
		</div>
	</body>
</html>

 

相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页
实付 49.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值