CSS 垂直居中和水平居中
来源:互联网 发布:软件导刊杂志社 编辑:程序博客网 时间:2024/04/29 13:05
.wrapper {
position: relative;
width: 500px;
height: 500px;
background-color: #ddd;
}
.content {
background-color: #6699FF;
width: 50%;
height: 50%;
position: absolute;
/*top: 25%;
left: 25%; 这两行和下面四行效果一样*/
top: 50%;
left: 50%;
margin-top: -25%;
margin-left: -25%;
值 描述 absolute
position: relative;
width: 500px;
height: 500px;
background-color: #ddd;
}
.content {
background-color: #6699FF;
width: 50%;
height: 50%;
position: absolute;
/*top: 25%;
left: 25%; 这两行和下面四行效果一样*/
top: 50%;
left: 50%;
margin-top: -25%;
margin-left: -25%;
}
可能的值
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。inherit规定应该从父元素继承 position 属性的值。 0 0
- div+css垂直居中和水平居中
- css 水平居中和垂直居中
- CSS设置水平居中和垂直居中
- CSS垂直居中和水平居中
- CSS水平居中和垂直居中解决方案
- CSS 垂直居中和水平居中
- CSS垂直居中和水平居中
- css垂直居中和水平居中
- css实现水平居中和垂直居中
- CSS实现水平居中和垂直居中
- CSS实现垂直居中和水平居中
- css水平和垂直居中
- HTML/CSS:图片居中(水平居中和垂直居中)
- CSS水平垂直居中
- css水平垂直居中
- CSS 水平垂直居中
- CSS水平垂直居中
- css水平垂直居中
- 零基础学习hadoop生态系统到上手工作线路指导初级篇(HBASE篇)
- 输出九九乘法表
- Java 8系列之Stream中万能的reduce
- 2017.2.10【初中部 GDKOI】模拟赛B组 运算符(calc) 题解
- stm32读写 DS2431
- CSS 垂直居中和水平居中
- TortoiseSVN 1.9.5安装 与 Eclipse4.4.2中安装SVN插件 图解详解
- 冒泡排序
- CentOS_6.5安装Nginx+PHP+MySQL
- ListView如何单独刷新一个item
- STL小结
- 完美解决smoothScrollToPosition(0)失效的问题
- struts
- avio.c分析