CSS 居中问题

CSS中不同情况下居中问题的解决方法

水平居中设置—行内元素

text-align:center;

水平居中设置——定宽块状元素（width固定）

margin:＊ auto;

水平居中设置——不定宽块状元素（width不固定） 

1.加入table标签

2.设置display:inline;转换为行内元素，再使用行内元素居中设置的办法text-align:center;

3.设置position:relative和left:50%,即达到居中目的

<style type="text/css">
	table{
		border: 1px solid;
		margin: 0 auto;
	}
</style>
<div>
	<table>
		<tbody>
			<tr><td>
				<ul>
					<li>First Line</li>
					<li>Second Line</li>
					<li>Third Line</li>
				</ul>
			</td></tr>
		</tbody>
	</table>
</div></span>

居中一个浮动元素

div{
width: 500px;
	height:300px;//高度可以不设
	margin: -150px 0 0 -250px;//-250px是控制居中的，width的一半
	position: relative;
	left: 50%;
}

垂直居中设置——父元素高度确定的单行文本

height:100px;
line-height:100px;

垂直居中设置——父元素高度确定的多行文本

使用插入table（包括tbody、tr、td）标签，同时设置vertical-align:middle;

<style type="text/css">
	.wrap{
		height: 300px;
		vertical-align: middle;
		border: 1px solid black;
	}
</style>
<table>
	<tbody>
		<tr><td class="wrap">
			<div>
				<p>看我是否可以居中</p>
				<p>看我是否可以居中</p>
				<p>看我是否可以居中</p>
				<p>看我是否可以居中</p>
			</div>
		</td></tr>
	</tbody>
</table>

完美居中

例一：

<span>I love flex layout!</span>
<style>
body{
	display:flex;
	justify-content:center;
	align-items:center;
	
	font-size:3em;
	color:#00ffff;
}
</style>

例二：

<p>与自己为敌，</p>
<p>与自己为友，</p>
<p>一边深挖思想，</p>
<p>一边埋葬自己。</p>
<style>
body{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	
	font-size:1.2em;
	color:purple;
}
</style>

隐性改变display类型

当为元素（不论之前是什么类型的元素，display:none除外）设置一下两句之一

1.position:absolute;

2.float:left或float:right

只要html代码出现以上两句之一，元素的display显示类型就会自动变为display:inline-block（块状元素）的方式显示