css内容居中

方法一：

父级：text-alien：center;

子集：display:inline-block;

css
        <style>
		.father{
			text-align: center;
			/*position: relative;
			float: left;
			left: 50%;*/
		}
		.father>div{
			background-color: pink;
			margin-top: 10px;
			height: 100px;
			width: 200px;
		}
		.center{
			display: inline-block;
		}
	</style>


html
	<div class="father">
		<div class="center">hello</div>
	</div>    

 

　　

 

方法二：

子集：margin:0 auto;

	<style>
		.father{
			/*text-align: center;*/
			/*position: relative;
			float: left;
			left: 50%;*/
		}
		.father>div{
			background-color: pink;
			margin-top: 10px;
			height: 100px;
			width: 200px;
		}
		.center{
			/*display: inline-block;*/
			margin: 0 auto;
		}
	</style>




	<div class="father">
		<div class="center">hello</div>
	</div>

 

　　

 

方法三：

集合float、position来完成

	<style>
		.father{
			position: relative;
			float: left;
			left: 50%;
		}
		.father>div{
			background-color: pink;
			margin-top: 10px;
			height: 100px;
			width: 200px;
		}
		.center{
			position: relative;
			float: left;
			left: -50%;
		}
	</style>




	<div class="father">
		<div class="center">hello</div>
	</div>

　　

方法四：

用transform（css3）、position完成

        <style>
		.father{
			position: relative;
			background: yellow;
			left: 50%;
		}
		.father>div{
			background-color: pink;
			margin-top: 10px;
			height: 100px;
			width: 200px;
		}
		.center{
			position: absolute;
			transform: translate(-50%, 0);
		}
	</style>




	<div class="father">
		<div class="center">hello</div>
	</div>
   

　　

转载于:https://www.cnblogs.com/liuyuweb/p/9871586.html