解決 居中 問題

 

<div class="parent">
　　<div class="child">DEMO</div>
</div>

水平居中

(1)inline－block ＋ text-align
優勢是兼容性好。
inline-block 內容有多寬，就是多寬。
text-align 對inline元素有用。可是須要一些代碼修復，text-align：center形成的問題。

<style type="text/css">
	.parent {width: 200px; height: 30px; text-align: center;background-color: #ccc;}
	.child {display: inline-block;background-color: #369;}
</style>



(2)table + margin
table 即像block元素，寬度又跟着內容走。
優勢是指設定了child元素，不關係parent的樣式。在ie8支持。

<style type="text/css">
	.parent {width: 200px; height: 30px; background-color: #ccc; }
	.child {display: table; background-color: #369;margin: 0 auto;}
</style>




(3)absolute + transform
transform:translateX(-50%)	移動自身的－50％的像素。
問題：主要是兼容性的問題，transform是css3.

<style type="text/css">
	.parent {position: relative; width: 200px; height: 20px; background-color: #ccc;}
	.child {position: absolute; left: 50%; transform: translateX(-50%); background-color: #369;}
</style>


 (4) flex + justify-content
優勢：只須要設定父元素。
或者對child 設定 margin: 0 auto;
缺點：低版本的不支持flex

<style type="text/css">
	.parent {display: flex; justify-content:center; width: 200px; height: 20px; background-color: #ccc;}
</style>
 垂直居中
(1)table－cell + vertical-align
變成單元格，加上vertical-align：middle；
優勢：兼容性比較好。

<style type="text/css">
	.parent {display: table-cell; vertical-align: middle; height: 100px;background-color: #ccc;}
	.child {background-color: #369;}
</style>

(2) absolute + transform
<style type="text/css">
	.parent {position: relative; height: 100px;background-color: #ddd;}
	.child {position: absolute; top: 50%; transform: translateY(-50%);}
</style>

(3)flex + align-items
優勢只須要設定parent。

<style type="text/css">
	.parent {display: flex; align-items:center; height: 100px;background-color: #ddd;}
	.child {background-color: #369;}
</style>

 水平和垂直都居中

(1) inline-block + text-align + table-cell + vertical-align

<style type="text/css">
	.parent {
		width: 100px;
		height: 100px;
		background-color: #444;

		text-align: center;
		display: table-cell;
		vertical-align: middle;
	}
	.child {
		background-color: #369;
		display: inline-block;
	}
</style>


(2)absolute + transform
<style type="text/css">
	.parent {
		width: 100px;
		height: 100px;
		background-color: #444;

		position: relative;
	}
	.child {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

	}
</style>


(3)flex + justify-content + align-items
<style type="text/css">
	.parent {
		width: 100px;
		height: 100px;
		background-color: #444;

		display: flex;
		justify-content: center;
		align-items:center;
	}
	.child {
		background-color: #369;
	}
</style>