css居中对齐

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div {
				text-align: center;
			}
			
			.box1 {
				width: 600px;
				height: 100px;
				background: #489BFC;
				margin: auto;
			}
			
			.box1 ul {
				width: 600px;
				height: 100px;
				padding: 0;
			}
			
			.box1 ul li {
				list-style: none;
				width: 100px;
				height: 30px;
				background: #C0A16B;
				border: 1px solid #204D74;
				border-radius: 4px;
				line-height: 30px;
				margin: auto;
				margin-bottom: 2px;
			}
			
			.box2 {
				width: 300px;
				height: 100px;
				background: #3EC742;
				margin: auto;
				float: left;
			}
			
			.box3 {
				width: 300px;
				height: 100px;
				background: #843534;
				margin: auto;
				float: left;
			}
			
			.box4 {
				width: 600px;
				height: 100px;
				background: #BCE8F1;
				margin: auto;
			}
			
			.bbox {
				width: 600px;
				height: 100px;
				margin: auto;
				display: block;
			}
			
			.ttbox {
				width: 600px;
				height: 50px;
				margin: auto;
			}
			
			.tbox1 {
				width: 300px;
				height: 50px;
				display: table-cell;
				vertical-align: top;
				background: #3EC742;
			}
			
			.tbox2 {
				width: 300px;
				height: 50px;
				display: table-cell;
				vertical-align: middle;
				background: #BCE8F1;
			}
			
			.tbox3 {
				width: 300px;
				height: 50px;
				display: table-cell;
				vertical-align: bottom;
				background: #CC0000;
			}
		</style>
	</head>

	<body>
		<div class="box1">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</div>
		<div class="bbox">
			<div class="box2">2</div>
			<div class="box3">3</div>
		</div>
		<div class="box4">4</div>
		<div class="ttbox">
			<div class="tbox1">tbox1</div>
			<div class="tbox2">tbox2</div>
			<div class="tbox3">tbox3</div>
		</div>
	</body>

</html>
相关文章
