CSS3实现水平垂直居中

时间：2014-10-29 14:37:40 阅读：226 评论：0 收藏：0 [点我收藏+]

   水平垂直居中的制作大家都有碰到过，水平居中方法好处理，但是垂直居中的话还是让很多人头痛过，我也碰到很多盆友来询问如何让元素水平垂直居中。前面也专门讨论过如何让图片，单行文本和多行文本实现各种浏览器的水平垂直居中的方案。

   这次在iPhone项目中实现弹出窗口水平垂直居中，总不是很理想，后来采用了一种纯CSS3的实box方法实现水平垂直居中，现将实现的代码片段贴出与大家分享：

   HTML Markup

<div class="center">
<img src="http://www.w3cplus.com/sites/default/files/source/webdesign.jpg" />
</div>
<div class="center">
<div class="text">我就一行文字</div>
</div>
<div class="center">
<div class="text">
我是多行文字<br />
我是多行文字
</div>
</div>

复制代码

CSS Code

.center {
width: 300px;
height: 200px;
padding: 10px;
border: 1px solid #ccc;
margin: 20px auto;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
display: -o-box;
-o-box-orient: horizontal;
-o-box-pack: center;
-o-box-align: center;
display: -ms-box;
-ms-box-orient: horizontal;
-ms-box-pack: center;
-ms-box-align: center;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
.center img,
.text {
border: 1px solid #dedede;
padding: 2px;
}

复制代码

CSS3实现水平垂直居中

标签：des http ar sp div on 代码 html bs

原文地址：http://www.cnblogs.com/liujin0505/p/4059365.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行