CSS 如何实现垂直居中图片弹窗的效果？

在一个容器里再定义一个绝对定位的p容器，再在p容器里放需要垂直居中的图片，图片定义相对定位的CSS。直接上CSS代码：#pic{width:300px;height:300px;background-color:green;border:6pxsolid#ccc;text-align:center;position:relative;display:.

专注于为中小企业提供成都网站建设、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业鸡冠免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了近千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

CSS如何显示一个从左上角开始展开的弹窗，最终是显示在屏幕中间，思路是什么，请大神指导下。

思路应该是一个从0%到100%的动画展开的效果，

大概需要写0%，50%，100%三个样式。

弹窗的css代码大概是:

position: fixed;

z-index: 2000;

left: 0;

top: 0;

这样弹窗的左上角原点在页面最左上角，如果要调整位置要用CSS变换特效(transform)的平移translate函数达到目的:

translate(x, y)（长度值或者百分比）：在水平方向、垂直方向平移元素。

translateX(value)：水平方向平移。

translateY(value)：垂直方向平移。

scale(x, y)、scaleX(value)、scaleY(value)：在水平方向、垂直方向或者两个方向上缩放元素。

rotate()、rotateX()、rotateY()、rotateZ()：rotate支持3D效果，可在x、y、z轴上旋转元素。

skew()、skewX()、skewY()：在水平方向、垂直方向或者两个方向倾斜一定的角度。

另外弹窗展开的动画要用到css3的动画属性:

animation-delay：设置动画开始前的延迟时间。

animation-direction：设置动画循环播放的时候是否方向播放，包含normal和alternate两个值。

animation-duration：设置动画播放持续的时间。

animation-interacion-count：设置动画的播放次数，可以为具体数据或者无限循环关键字infinite。

animation-name：指定动画名称。

animation-play-state：允许动画暂停和重新播放，包含running、paused。

animation-timing-function：指定如何计算中间动画值，

css样式弹出层在不同浏览器下显示位置不同

在tooltip样式中加入 display；block属性！显示正常！.tooltip{display:block;position:relative; /*这个是关键*/ z-index:2; }

css代码如下

style type="text/css"

/*Tooltips*/

.tooltips{ display:block;position:relative; /*这个是关键*/ z-index:2; }

.tooltips:hover{ z-index:3; background:none; /*没有这个在IE中不可用*/ }

.tooltips span{ display: none; }

.tooltips:hover span{

/*span 标签仅在 :hover 状态时显示*/

display:block;

position:absolute;

top:2px;

left:1px;

width:220px;

border:1px solid black;

background-color:#FFFFFF;

padding: 3px;

color:black;

}

/style

希望能帮到您，谢谢！

关于如何编写div+css弹窗问题

编写div+css弹窗，首先单独的div+css是无法完成的，需要通过JS或者是JQ，这里用JS为例，弹窗的实现就是通过js的alert方法来实现的，可以通过给一个链接一个点击事件，然后实现弹窗实现，具体通过代码来实现：

html

head

/head

script

function dd(){

alert('我是弹出内容');

}

/script

body

a href='地址' onclick = "dd"点我出弹窗/a

/body

/html

当前名称：css弹窗样式,弹窗居中css
分享网址：http://hbruida.cn/article/dssdhso.html