CSS讓容器水平和垂直居中

在rwd使用規畫版型時，最麻煩的就是將父容器中的子容器轉換屬性形態後的高度置中，子容器可能因為文字與圖片改變會使得高度不斷變化，此時就要利用百分比的高度值控制在父容器的正中間，整理與實做了幾個方式以便日後需要時可快速找出。

1-使用CSS transform:translateY 屬性

<!DOCTYPE html>
<html>
	<head>
	<meta name="viewport" content="width=device-width, user-scalable=no">
	<!--<meta http-equiv="content-type" content="text/html; charset=UTF-8">-->
	<meta charset="UTF-8">
	<!--<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">-->
	<!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<!--<meta name="author" content="oxxo.studio">-->
	<!--<meta name="copyright" content="oxxo.studio">-->
	<title>CSS 垂直置中的七個方法 demo2</title>

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 7] >
	<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
	<![endif]-- >
	<!--[if lt IE 9]>
			<script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->

	<style>
	html, body {
		height: 100%;
		margin: 0px;
		padding: 0px;
	}
	.use-transform {
		width: 100%;
		height: 100%;
		border: 1px solid #000;
	}
	.inner {
		position: relative;
		width: 50%;
		height: 250px;
		top: 50%;
		margin: 0 auto;
		transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		background: #095;
	}
	</style>
	</head>

	<body>
	<div class="use-transform">
		<div class="inner"> inner </div>
	</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS 垂直置中的七個方法 demo2</title>

<!--[if lt IE 7] >

<![endif]-- >

<!--[if lt IE 9]>

<![endif]-->

<style>

html, body {

height: 100%;

margin: 0px;

padding: 0px;

}

.use-transform {

width: 100%;

height: 100%;

border: 1px solid #000;

}

.inner {

position: relative;

width: 50%;

height: 250px;

top: 50%;

margin: 0 auto;

transform: translateY(-50%);

-ms-transform: translateY(-50%);

background: #095;

}

</style>

</head>

<body>

<div class="inner"> inner </div>

</div>

</body>

</html>

See the Pen CSS 垂直置中的七個方法 demo2 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

js bin展示開新視窗

需注意IE版本相容css3問題 (IE9以後版本才可用)
完全使用當前最新版本的ie，需要在 <head>加上 <meta http-equiv="X-UA-Compatible" content="IE=edge">就可使用目前支援的最新版本ie，對應的部份可以參考這

資料源：

標籤雲

1-使用CSS transform:translateY 屬性