div+css 怎么让一个小div在另一个大div里面 垂直居中

方法1:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.parent {
          width:800px;
          height:500px;
          border:2px solid #000;
          position:relative;
}
 .child {
            width:200px;
            height:200px;
            marginauto;  
            positionabsolute;  
            top0left0bottom0right0
            background-colorred;
}

方法2:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.parent {
            width:800px;
            height:500px;
            border:2px solid #000;
            display:table-cell;
            vertical-align:middle;
            text-aligncenter;
        }
        .child {
            width:200px;
            height:200px;
            display:inline-block;
            background-colorred;
        }

方法3:

1
2
3
4
5
6
7
8
9
10
11
12
13
.parent {
            width:800px;
            height:500px;
            border:2px solid #000;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        .child {
            width:200px;
            height:200px;
            background-colorred;
        }

方法4:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.parent {
            width:800px;
            height:500px;
            border:2px solid #000;
            position:relative;
        }
        .child {
            width:300px;
            height:200px;
            margin:auto;
            position:absolute;/*设定水平和垂直偏移父元素的50%,
再根据实际长度将子元素上左挪回一半大小*/
            left:50%;
            top:50%;
            margin-left-150px;
            margin-top:-100px;
            background-colorred;
        }

div+css 怎么让一个小div在另一个大div里面 垂直居中的更多相关文章

  1. 25条div+CSS编程提醒及小技巧整理

    1.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 2.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次:对一个标签同时使用clas ...

  2. 一个大div里面包裹一个小div,里面的小div的点击事件不触发外面的这个大div的点击事件

    一开始上html代码 <div id="div1" style="background: blue;width: 100px; height: 100px;&quo ...

  3. div+css 左右两列自适应高度 ,以及父级div也跟着自适应子级的高度(兼容各大浏览器)

    <style type="text/css" media="screen"> <!-- #main {width:500px;_height: ...

  4. div+css布局记扎

    实际开发网站过程中边碰壁边积累了一些div+css布局相关的小技巧,在这里做一些整理与大家一起探讨.本文章将间歇性更新. 1.div+css布局综述 div+css布局个人观点就是“盒子套盒子”的关系 ...

  5. (一)初识div+css

    关于div+css,一直以来都是听其名,而不知其为何.今天看了半天的视频,终于对此略有了解,感觉挺好的,相比之前的table布局页面,div+css就是一把页面布局利器!! div全称division ...

  6. 正确认识 DIV+CSS 概念

    今天看到神采飞扬发表于前端观察的<DIV+CSS 请不要再忽悠人了>,讲的挺有深意的,尤其对于新手如何正确认识div,学习web标准,使用web标准建站应该有很大帮助.转载过来,共同分享. ...

  7. DIV+CSS 让同一行的图片和文字对齐【转藏】

    DIV+CSS 让同一行的图片和文字对齐 DIV+CSS 让同一行的图片和文字对齐 在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新 ...

  8. div+css样式表的id,class的常用命名规则

    div+css样式表的id的常用命名规则如下表所示: div+css样式表的id的常用命名规则如下表所示: 页头 header 登录条 loginBar 标志 logo 侧栏 sideBar 广告 B ...

  9. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  10. 巧妙使用div+css模拟表格对角线

    首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见 ...

随机推荐

  1. python-day15函数递归

    1.递归: 在函数内,调用自己.  (技巧: 每次调用时,函数前面需加上return,这样返回值就可以一层一层 的返回去) #def age(n):#    if n == 1:#        re ...

  2. Android studio jni

    首先我们要明确几个概念,jni,ndk,共享库(.so). jni是java native interface的缩写,java 本地接口.它提供了若干的API实现了Java和其他语言的通信(主要是C/ ...

  3. 牛客网——B-栈和排序

    链接:https://www.nowcoder.com/acm/contest/58/B来源:牛客网 题目描述 给你一个1->n的排列和一个栈,入栈顺序给定 你要在不打乱入栈顺序的情况下,对数组 ...

  4. hibernate中删除表遇到主键被外键引用违反完整约束条件不能删除的问题

    MySQL在InnoDB中设置了foreign key关联,造成无法更新或删除数据.可以通过设置FOREIGN_KEY_CHECKS变量来避免这种情况.  SET FOREIGN_KEY_CHECKS ...

  5. Get gcc built-in macros using command gcc -dM -E - < /dev/null

    root@vmuser-virtual-machine:/home/vmuser# gcc -dM -E - < /dev/null #define __SSP_STRONG__ 3#defin ...

  6. sgu 121. Bridges painting 列举情况 难度:1

    121. Bridges painting time limit per test: 0.25 sec. memory limit per test: 4096 KB New Berland cons ...

  7. bzoj2463

    题解: 当n为奇数,输出Bob 否则输出Alice 代码: #include<bits/stdc++.h> using namespace std; int n; int main() { ...

  8. 内核事件KEVENT(同步)

    转载请您注明出处:http://www.cnblogs.com/lsh123/p/7358702.html 一.驱动程序与驱动程序的事件交互    IoCreateNotificationEvent ...

  9. 全球DEM数据GMT绘制

    http://gmt-china.org/download/

  10. kbmMW CopyRawRecords 用法

    复制一个ClientQuery数据集到另外一个ClientQuery,我们应该怎么做?并注意什么呢? kbmMW为我们提供了好几个方法,有LoadFromDataSet,CopyRawRecords, ...