未知高度和宽度元素的水平垂直居中 flex布局轻松解决

2018-01-03 11:15:00

admin

原创

420

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>未知高度和宽度元素的水平垂直居中 flex布局轻松解决</title>
	</head>
	<style>
#container{
	height:300px;
	background:#d6d6d6;
	display:flex;
	justify-content:center;
  align-items: center;
}

#center{
	width:100px;
	height:100px;
	background-color:#666;
	color:#fff;
	font-weight:bold;
	font-size:18px;
	
	display:flex;		/*这个写在这只是为了#center这几个字的垂直居中*/
	justify-content:center;
  align-items: center;
}
	</style>
	<body>
	<div id='container'>
		<div id = 'center'>#center</div>
	</div>
		
	</body>
</html>

文章分类

联系我们

电话：	18902328227
Email：	2689701946@qq.com
QQ：	2689701946
微信：	18902328227
地址：	广州番禺区繁华路

在线客服
关注微信
联系电话

- 欢迎咨询
- 欢迎加入QQ群 303257430
公众号：源宝网络
- 联系电话及微信号 18902328227