解决 居中 问题

 

<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>

 

转载于:https://www.cnblogs.com/hgonlywj/p/4899705.html