bootstrap 如何让div内部垂直居中？

Union Level · #1 IP: 112.87.85.95 2016-11-05, 11:42 PM

Code:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<style>
		.a {
			height: 50px;
			border: 1px solid #ccc;
			background-color: #eee;
		}
		.div {
			height: 130px;
			background-color: #eee;
			line-height: 9px;
		}
		#center{
		position: relative;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-moz-transform:  translateY(-50%);
		-ms-transform:  translateY(-50%);
		-o-transform:  translateY(-50%);
		transform:  translateY(-50%);
		}

	</style>
</head>
<body>
	<div class="text-center div">
	<div id="center">
	    <p>ddd</p>
	    <p>ddd</p>
	</div>
</div>
 
	<script src="js/jquery-1.12.4.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
</body>
</html>

//这段css是让div内容垂直居中;
//注意的是，在bootstrao中垂直居中的div不要包裹在.container里;

其实垂直居中方法实现有很多，这是我目前水平认知比较好的解决方案;

-------------
如是一行，设置行高等于div高度,height=line-height

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)