您的位置：首页 > 其它

未知宽高元素水平垂直居中

2015-11-12 15:50 260 查看 
[b]垂直水平居中
一、position+transform[/b]


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<!--方法1：一个未知宽高的弹出框，水平垂直居中-->
<div style="position:relative;width: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{
width:500px;
border:1px solid #888;
}
.parent-panel{
width: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{
width:500px;
border:1px solid #888;
display:inline-block;
vertical-align: middle;
}
.parent-panel2{
width: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
}


注：已经宽高的div可以用
.mydiv{width:300px;height:200px;position:absolute;left:50%;top:50%;margin:-100px00-150px}
这里不能用margin:-50%，是因为margin百分数是相对于父元素的width

[b]水平居中（ul中嵌套li）[/b]

一、float+position



浮动方案是比较难理解的，详细内容可以阅读Matthew James Taylor写的《Horizontally Centered Menus with no CSS hacks》一文。

.pagination {
float: left;
width: 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是相对其原来位置

优点：扩展性强，兼容性强;

缺点：理解性难。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航