水平居中 || 垂直居中 || 水平垂直居中的几种常见方式

nick906
nick906 发布于 7 天前 浏览:145 类型:原创 - 随笔 分类:HTML/CSS - html/css 二维码: 作者原创 版权保护
1、水平居中的五种方式(父子容器宽度不一定)
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>horizontal center</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.parent{
			width: 200px;
			height: 100px;
			margin: 20px;
			background-color: yellow;
		}
		.child{
			background-color: green;
		}
		/*these four ways can be adapted to unknown width of parent/child container*/
		/*first way*/
		.parent-a{
			text-align: center;
		}
		.child-a{
			display: inline-block;
		}
		/*second way*/
		.child-b{
			display: table;/*its width ups to its content*/
			margin: 0 auto;
		}
		/*third way, ie9+*/
		.parent-c{
			display: flex;
		}
		.child-c{
			margin: 0 auto;
		}
		/*fourth way*/
		.parent-d{
			display: flex;
			justify-content: center;
		}
		/*fifth way*/
		.parent-e{
			position: relative;
		}
		.child-e{
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}
	</style>
</head>
<body>
	<div class="parent parent-a">
		<div class="child child-a">demo-a</div>
	</div>
	<div class="parent parent-b">
		<div class="child child-b">demo-b</div>
	</div>
	<div class="parent parent-c">
		<div class="child child-c">demo-c</div>
	</div>
	<div class="parent parent-d">
		<div class="child child-d">demo-d</div>
	</div>
	<div class="parent parent-e">
		<div class="child child-e">demo-e</div>
	</div>
</body>
</html>


2、垂直居中的三种方式(父子容器高度不一定)
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>vertical center</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.parent{
			width: 200px;
			height: 100px;
			margin: 20px;
			background-color: yellow;
		}
		.child{
			background-color: green;
		}
		/*the three ways can be adapted to unknown height of parent/child container*/
		/*first way*/
		.parent-a{
			position: relative;
		}
		.child-a{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}
		/*second way*/
		.parent-b{
			display: flex;
			align-items: center;
		}
		/*third way*/
		.parent-c{
			display: table-cell;
			vertical-align: middle;
		}
	</style>
</head>
<body>
	<div class="parent parent-a">
		<div class="child child-a">demo-a</div>
	</div>
	<div class="parent parent-b">
		<div class="child child-b">demo-b</div>
	</div>
	<div class="parent parent-c">
		<div class="child child-c">demo-c</div>
	</div>
</body>
</html>


3、水平垂直居中的三种方式(父子容器宽度、高度不一定)
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>horizontal and vertical center</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.parent{
			width: 200px;
			height: 100px;
			margin: 20px;
			background-color: yellow;
		}
		.child{
			background-color: green;
		}
		/*the three ways can be adapted to unknown width and height of parent/child container*/
		/*first way*/
		.parent-a{
			position: relative;
		}
		.child-a{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
		/*second way*/
		.parent-b{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		/*third way*/
		.parent-c{
			display: table-cell;
			text-align: center;
			vertical-align: middle;
		}
		.child-c{
			display: inline-block;
		}
	</style>
</head>
<body>
	<div class="parent parent-a">
		<div class="child child-a">demo-a</div>
	</div>
	<div class="parent parent-b">
		<div class="child child-b">demo-b</div>
	</div>
	<div class="parent parent-c">
		<div class="child child-c">demo-c</div>
	</div>
</body>
</html>


参考:网易顾平
z
给个赞 1 人点赞
收藏 1 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
nick906 nick906 作者

你不对生活用心,生活对你用刑。

作者最新