可以直接把所有代码直接copy走，运行，然后看怎么写的。我是一个菜鸟，正在从基础开始学习，期待有大神的指导。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>宽高度不固定水平垂直居中</title>
<style>
/*水平居中代码*/
.container{
width:500px;height:80px;background:#c2300b;margin-left: 50px;padding-top: 20px;text-align: center;
}
.center{display: inline-block;border:2px solid #fff;}
.center{_display:inline;}
.center a{float:left;border:1px solid #fff;padding:5px 10px;margin:10px;color:#fff;text-decoration: none}
/*代码要点*/
/* 父元素的text-align:center;
子元素的display:inline-block;*/
/*水平居中代码*/
/*宽度不固定水平垂直居中*/
#container {display: table;background: #c2300b;width:500px;height:200px;overflow:hidden;margin-left:50px;}
#box{vertical-align: middle;display: table-cell;text-align: center;_position:absolute;_top:50%;_left:50%;}
#content{color:#fff;border:1px solid #fff;display: inline-block;_position: relative;_top:-50%;_left:-50%;}
/*代码要点*/
/*父容器的display:table;overflow:hidden;
子容器的vci的 vertical-align:middle;display:table-cell;*/
/*_position为了针对ie6设计*/
/*宽度不固定水平垂直居中*/
/*宽度高度固定的垂直水平居中*/
.fixed{width:500px;height:200px;background: #c2300b;margin-left:50px;position: relative;}
.fasten{width:50px;height:20px;background: #fff;position: absolute;top:50%;left:50%;margin-top:-10px;margin-left: -25px;text-align: center;}
/*代码要点*/
/*父容器的绝对定位*/
/*子容器的绝对定位，上、左各50%;，然后左外边距、上外边距分为为要居中的元素的的宽和高一半*/
/*宽度高度固定的垂直水平居中*/
</style>
</head>
<body>
<h1>水平居中</h1>
<div class="container">
<div class="center">
<a href="javascript:;">1</a>
<a href="javascript:;">2</a>
<a href="javascript:;">3</a>
</div>
<div style="clear:both"></div>
</div>
<h2>宽度不固定水平垂直居中</h2>
<div id="container">
<div id="box">
<div id="content">
垂直水平居中
</div>
</div>
</div>
<h1>宽度高度固定的垂直水平居中</h1>
<div class="fixed">
<div class="fasten">居中</div>
</div>
</body>
</html>
浙公网安备 33010602011771号