在写代码前，先做下准备工作，写两个div,设置下div的大小，把小的div放在大的div里面。可以给小的div设置下颜色，方便观看.

方法一：写一个伪元素，将它设置为行内块元素，高度与父元素相同，写一条属性，vertical-align:middle,子元素也要写，具体代码如下：

<style>

div{width:500px;height:500px;box-shadow:0 0 5px #000; text-align:center;}

.zi{width:100px;height:100px;background:#60C;display:inline-block;vertical-align:middle;}

div:after{content:""; height:500px; background:#00C;display:inline-block;vertical-align:middle;}

</style>

</head>

<body>

<div >

    <div class="zi"></div>

</div>

方法二：利用定位，给大的div写一个position:relative;子元素写position:absolute; 这时子元素的包含块就是外面大的div,然后给里面的div写一下位置left:0;right:0;top:0;bottom:0;margin:auto;主要看一下CSS中的样式，具体代码如下：

div{width:500px;height:500px;box-shadow:0 0 5px #000; position:relative;}
.zi{width:100px;height:100px;background:#60C; position:absolute; left:0;right:0;top:0;bottom:0;margin:auto;}

方法三：与方法二类似，也是用到定位，但是区别在于调整里面div位置时，不写right:0;bottom:0;而是使用margin可以设置负数，调整里面div的位置，具体代码如下：

div{width:500px;height:500px;box-shadow:0 0 5px #000; position:relative;}

.zi{width:100px;height:100px;background:#60C;position:absolute;left:50%;top:50%; margin:-50px 0 0 -50px;

方法四：这种方法是在前一种方法上的延申，只是不是用margin，而是使用transform：translate()可以在不知道宽高的情况下进行居中，tranlate（）函数是相对于自身的。

具体代码如下：

div{width:500px;height:500px;box-shadow:0 0 5px #000;position:relative;}

.zi{width:100px;height:100px;background:#60C;position:absolute;left:50%;top:50%;transform:translate(-50px,-50px);}

方法五：使用弹性盒，给父元素设置这三条属性display:flex;  水平方向居中 justify-content:center;垂直方向居中align-items:center;具体代码如下：

div{width:500px;height:500px;box-shadow:0 0 5px #000; display:flex; justify-content:center;align-items:center;}

.zi{width:100px;height:100px;background:#60C;}

让块元素在div中水平居中，并且垂直居中的五种方法的更多相关文章

  1. div中的内容垂直居中的五种方法

    一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...

  2. CSS总结div中的内容垂直居中的五种方法

    一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...

  3. 在shell中变量的赋值有五种方法！

    转至:https://blog.csdn.net/weibo1230123/article/details/82085226 在shell中变量的赋值有五种 :使用 read 命令,直接赋值,使用命令 ...

  4. 设置 img 在 div 中水平居中和垂直居中

    Ø  前言 写 html + css 时,img 标签的垂直与水平居中,应该是很常见的设计.实现的方式很多,但是容易遗忘,下面分别整理了几种实现方式. 1.   css 代码 <style ty ...

  5. JAVA中创建线程池的五种方法及比较

    之前写过JAVA中创建线程的三种方法及比较.这次来说说线程池. JAVA中创建线程池主要有两类方法,一类是通过Executors工厂类提供的方法,该类提供了4种不同的线程池可供使用.另一类是通过Thr ...

  6. 一个未知宽高的元素在div中垂直水平居中

    <body> <div id="#div1"> <img src="img1.png"></img> </ ...

  7. [转]如何让div中的内容垂直居中

    转自:http://blog.163.com/yan_1990/blog/static/197805107201211311515454/ 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布 ...

  8. 如何让div中的内容垂直居中

    虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处.比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果, ...

  9. 文字在div中水平和垂直居中的的css样式

    文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...

随机推荐

  1. 【Spring Cloud】服务容错保护：Hystrix（四）

    一.雪崩效应 在微服务架构中,由于服务和服务之间可以互相调用,一项工作的完成可能会依赖调用多个微服务模块,但由于网络原因或者自身的原因,服务并不能保证100%可用,如果单个服务出现问题,调用这个服务就 ...

  2. TensorFlow2.0（9）：TensorBoard可视化

    .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...

  3. Mac系统 安装Photoshop CC 2018破解版

    应用场景 本人从事前端行业,但是工作中有时也需要会点PS技能,之前一直使用window系统,突然换了Mac其他软件基本都差不多安装完了,就剩下比较难搞的PS.刚开始按照网上乱七八槽的教程下载过好多次都 ...

  4. Arduino学习笔记⑦ EEPROM断电保存数据

    1.前言     EEPROM,叫做电可擦可编程可读寄存器(是不是觉得好官方,不知道是什么鬼?反正我也一脸懵逼),只需要知道这是一种断电后数据不会丢失的存储设备,可以用来应对需要做记录做保存的场合.简 ...

  5. 设计模式（二十三）Interpreter模式

    在Interpreter模式中,程序要解决的问题会被用非常简单的“迷你语言”表述出来,即用“迷你语言”编写的“迷你程序”把具体的问题表述出来.迷你程序是无法单独工作的,还需要用java语言编写一个负责 ...

  6. Redis（十二）flush误操作、Redis安全、处理bigkey和寻找热点key

    一.flushall/flushdb误操作的处理 假设进行flush操作的Redis是一对主从结构的主节点,其中键值对的个数是100万,每秒写入量是1000. 1.缓存与存储 被误操作flush后,根 ...

  7. char 、signed char、unsigned char

    看如下代码: char c = -1; signed char sc = -1; unsigned char uc = -1; printf("c=%d, sc=%d, uc=%d, cx= ...

  8. java常用类 比较器/system/math/big

    Java 比较器 自然排序:java.lang.Comparable 定制排序:java.util.Comparator 自然排序:java.lang.Comparable  Comparable接口 ...

  9. Java基础系列二：Java泛型

    该系列博文会告诉你如何从入门到进阶,一步步地学习Java基础知识,并上手进行实战,接着了解每个Java知识点背后的实现原理,更完整地了解整个Java技术体系,形成自己的知识框架. 一.泛型概述 1.定 ...

  10. 基于华为物联网IOT的应用开发 ---界面管理开发

    在前面随笔<基于华为物联网IOT的应用开发 --- 基于.net 的SDK封装>介绍过IOT中应用侧SDK的封装,主要就是基于华为IOT的应用侧封装,以便在应用系统中进行调用.应用侧SDK ...