Article Detail

CSS3实现垂直居中

.c{ /*需要水平垂直居中的元素css*/ position : absolute; top : 50%; left : 50%; transform : t...

HTML 阅读 33.8万 2 分钟阅读 2018-01-06 17:01

<style>
.c{
	/*需要水平垂直居中的元素css*/
	position  : absolute;
	top       : 50%;
	left      : 50%;
	transform : translate(-50%,-50%);
}
.pr{
	/*父级元素css 单行居中*/
	display         : flex;
	justify-content : center;
	align-items     : center;
}
.prm{
	/*父级元素css 多行垂直居中*/
	display         : flex;
	justify-content : center;
	flex-wrap       : wrap/wrap-reverse;
	align-items     : center;
}
</style>
<div class="pr" style="display:none">
	<p class="c">单行居中 单行居中</p>
</div>

<div class="prm">
	<p class="c">
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
	</p>
</div>

Comments 评论区

广西南宁市 2018-01-06 17:12

<style>
.prm {
	width:300px;
	height:300px;
	background:green;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}
</style>
<div class="pr" style="display:none">
	<p class="c">单行居中 单行居中</p>
</div>

<div class="prm">
	<p class="c">
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
		多行垂直居中 多行垂直居中 多行垂直居中 
	</p>
</div>

#⁰

广西南宁市 2018-01-06 17:15

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>垂直居中Demo</title>
		<style>
		#container{
			height:300px;
			background:#d6d6d6;
			display: -webkit-box; 
			display: -moz-box; 
			display: -ms-flexbox; 
			display: -webkit-flex; 
			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>
	</head>
	<body>
	<div id='container'>
		<div id = 'center'>#center</div>
	</div>
		
	</body>
</html>

#⁰

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。