垂直水平居中
一、position+transform
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <!--方法1：一个未知宽高的弹出框，水平垂直居中--> <div style="position:relative;100%;height:600px;border:1px solid #888">方法1 <div class="modal"> <div class="modal-header">弹出窗标题</div> <div class="modal-body"> 微信开发者大会（北京）的成功举办，引起业界的极大关注。 应广大微信开发者的强列要求，深圳微信开发者大会也在如火如荼的筹备中。 本文总结了技术团队不应错过2014年深圳微信开发者大会的十个理由 </div> </div> </div> <style type="text/css"> .modal-header { padding: 10px 20px; background: rgba(0,0,0,.25); color:#fff; } .modal-body{ padding: 20px; background: #fff; } .modal { border: 1px solid #888; border-radius: 5px; box-shadow: 0 0 3px rgba(0,0,0,.5); /**主要代码*/ position:absolute; top:50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } </style> <!--方法1 end-->
二、flex
<!--方法2 parent-panel内的元素水平垂直居中--> <div class="parent-panel">方法2 <div class="middle-panel"> <p>深圳站依旧秉承“演讲从实践出发、听众从中受益”的原则， 在保持北京站特色之余，针对微信开发的新情况重新设置了议程，内容源于实践又富于启发性。 </p> <p>正进行微信开发的开发团队（开发者）、有兴趣或即将投身于微信开发的开发者、 想开发相关微信应用正努力寻找微信开发团队的传统IT企业，该会将是你不容错过的学习借鉴成功研发经验、寻找合作的大好机会。 </p> <p>如果你还在犹豫，可以仔细阅读一下主办方总结的技术团队不应错过2014年微信开发者大会深圳站的十个理由。 </p> </div> </div> <style type="text/css"> .middle-panel{ 500px; border:1px solid #888; } .parent-panel{ 100%; height:400px; border:1px solid #888; /**主要代码*/ display: flex; align-items: center; justify-content: center; } </style> <!--方法2 end-->
三、:after{display:inline-block;height:100%;vertical-aligin:middle;}
<!--方法3 parent-panel2内的元素垂直居中--> <div class="parent-panel2">方法3 <div class="middle-panel2"> <p>深圳站依旧秉承“演讲从实践出发、听众从中受益”的原则， 在保持北京站特色之余，针对微信开发的新情况重新设置了议程，内容源于实践又富于启发性。 </p> <p>如果你还在犹豫，可以仔细阅读一下主办方总结的技术团队不应错过2014年微信开发者大会深圳站的十个理由。 </p> </div> </div> <style type="text/css"> .middle-panel2{ 500px; border:1px solid #888; display:inline-block; vertical-align: middle; } .parent-panel2{ 100%; height:400px; border:1px solid #888;
text-align:center; } .parent-panel2:after{ /**主要代码*/ content:""; display: inline-block; vertical-align: middle; height: 100%; } </style> <!--方法3 end--> </body> </html>
四、table-cell
<div class="box">
<span><img src="..."/></span>
</div>
.box{
display:table;
}
span{
display:table-cell;
text-aligin:center;
vertical-aligin:middle
}
五、position+margin
#ele{ position:absolute; top:0; left:0; bottom:0; right:0; margin；auto; }
注：已经宽高的div可以用
.mydiv{300px;height:200px;position:absolute;left:50%;top:50%;margin:-100px00-150px}
这里不能用margin:-50%，是因为margin百分数是相对于父元素的width
水平居中（ul中嵌套li）
一、float+position
浮动方案是比较难理解的，详细内容可以阅读Matthew James Taylor写的《Horizontally Centered Menus with no CSS hacks》一文。
.pagination { float: left; 100%; overflow: hidden; position: relative; } .pagination ul { clear: left; float: left; position: relative; left: 50%;/*整个分页向右边移动宽度的50%*/ } .pagination li { display: block; float: left; position: relative; right: 50%;/*将每个分页项向左边移动宽度的50%*/ }
这里简单介绍一下主要步骤：
没有浮动的div：可以看到宽度为100%。
向左边浮动的div：宽度由div中的内容决定（除非显示设置宽度）。
标准左对齐的菜单：使用浮动将导航浮动到左边，每个分页项也浮动。
向右移动ul：设置ul的position:relative属性，并且向右移动50%（left: 50%）。
向左移动ul中的所有li：在li上也设置position:relative属性，同时向左移动50%（right: 50%）。
通过以上步骤就可以达到我们想要的效果了。
优点：兼容性强，扩展性也比较好；
缺点：实现原理较复杂。
二、绝对定位+相对定位
这种方案实际是浮动方案的修改版。
.pagination { position: relative; } .pagination ul { position: absolute; left: 50%; } .pagination li { float: left; position: relative;/*注意，这里不能是absolute*/ right: 50%; }
这里解释一下为什么不能用position:absolute，absolute是相对定位父级重新定位，而relative是相对其原来位置
优点：扩展性强，兼容性强;
缺点：理解性难。