1. 宽高固定

设置要水平垂直居中的 div 的 position 为 absolute,left:50%; margin-left为负的这个元素宽度的一半,同理,top:50%;margin-top为负的这个元素的高度的一半。

#child {
width:300px;
height:200px;
position:absolute;
left:50%;
margin-left:-150px;
top:50%;
margin-top:-100px;
}

2. 宽高不固定

由 1 可演变,既然 margin-left ,margin-top 为负的这个元素宽度, 高度的一半, 那么也可用百分比设置啊,使用 transform 属性, translate 平移水平、垂直方向的百分值。即

#child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

  

3. flex 布局

还可以用 flex 布局哦~ 仅需要父级元素配置就好了~

#parent {
display: flex;
justify-content: center;
align-items:center;
}

  

 由此,便可以实现子元素的上下左右居中的效果,快去试试把~

css中设置div垂直水平居中的方法的更多相关文章

  1. CSS中设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  2. css中设置div水平居中,margin:0px auto无用的情况

    在CSS中加了margin:0px auto;却没有效果,不能实现居中的问题!margin:0px auto;意思就是:上下边界为0.左右依据宽度自适应!就是水平居中的意思.无效的原因是,当你没有设置 ...

  3. css中设置div水平居中,margin:0px auto没用的情况

    在CSS中加了margin:0px auto;却没有效果,不能实现居中的问题!margin:0px auto;意思就是:上下边界为0,左右根据宽度自适应!就是水平居中的意思.无效的原因是,当你没有设置 ...

  4. CSS中设置div垂直居中

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  5. css实现垂直水平居中的方法(个数不限)?

    方法一:使用绝对定位 大家都知道margin:0 auto;能够实现水平居中,但却不知道margin:0 auto;也是可以实现垂直居中的: 给居中元素添加如下样式: .Absolute-Center ...

  6. div中单行文字垂直水平居中

    1.div中单行文字垂直水平居中.条件:外层div高度已经给定.代码如下: 复制代码代码如下: <style type="text/css">.div3{border: ...

  7. CSS中隐藏内容的3种方法及属性值

    CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59)   在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...

  8. CSS中隐藏内容的3种方法

    CSS中隐藏内容的3种方法 一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出层.隐藏滚动条.清除错位和浮动等. 1.使用display:none来隐藏所有内容 display:none可 ...

  9. 在css中设置图片的背景图,怎么设置图片纵向拉伸

    css中设置背景图拉伸填充,在css2.1之前这个背景的长宽值是不能被修改的. 实际的结果是只能重复显示,可以使用repeat,repeat-x,repeat-y,no-repeat这些属性来控制背景 ...

随机推荐

  1. 二维动态规划——Interleaving String

    97. Interleaving String Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2 ...

  2. js实现数组去重并且显示重复的元素和索引值

    var arr=["a","b","c","d","c","b","d ...

  3. java中数组的排序,直接排序,冒泡排序,插入排序

    1.直接排序: public static void selectSort(int[] arr) { for (int x = 0; x < arr.length - 1; x++) { for ...

  4. # C#不登录电脑启动程序

    我们知道开机自启动程序如果在用户不登录的情况下是不启动的,但是服务类程序是可以跨过用户登录启动的,例如IIS服务,SQL服务.如果我们已经写好了桌面应用程序,又希望他开机自启动,那就需要借助系统服务在 ...

  5. 一次dns缓存引发的惨案

    时间2015年的某个周六凌晨5点,公司官方的QQ群有用户反馈官网打不开了,但有的用户反馈可以打开,客服爬起来自己用电脑试了一下没有问题,就给客户反馈说,可能是自己网络的问题,请过会在试试.早点8点,越 ...

  6. HDU 2186 悼念512汶川大地震遇难同胞——一定要记住我爱你

    悼念512汶川大地震遇难同胞——一定要记住我爱你 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java ...

  7. static的加载先后顺序

    1.静态变量的声明和赋值是分开的,静态变量会先被声明,赋值操做被放在了静态代码块中. 2.静态变量的赋值和静态代码块的执行顺序和代码的先后书写顺序相关. 3.静态代码块优先执行,其次构造方法,最后普通 ...

  8. 什么是DOCTYPE?

    一.DOCTYPE是什么? DOCTYPE是文档类型的速记(文档.网页中指定页面的XHTML或HTML版本类型).使符合标准的页面,一个关键组成部分是DOCTYPE声明.只有确定了正确的XHTML D ...

  9. 一个Python小白5个小时爬虫经历 【续】

    前言 昨天实现了python简单的数据采集之后本来还挺高兴的,结果发现在.NET读取txt文件后反序列化总是报错.具体错误原因好像是从txt读取数据之后会自动加一个隐藏的字符串,没错,肉眼看不见,就导 ...

  10. 通过映射关系 动态转义为统一格式的数据 (支持 JSON 和 XML )

    在很多的时候 我们都会 需要 将不同格式的数据  转换为 统一的数据格式 比如 将Json 源数据 { "b": [ { "c": "referenc ...