在写代码前，先做下准备工作，写两个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. java集合之HashSet哈希SET基础

    hashSet实现set接口.serializable.cloneable接口.不允许有重复值,但可以null,不保证与插入顺序一致. HashSet迭代的时间与HashSet实例的大小(元素的数量) ...

  2. 简单认识JVM

    准备: 在具体聊JVM之前,我们先看两张图,通过分析图,咱们慢慢来聊聊JVM. JVM内存结构图 JVM内存结构脑图 上面两张图中,第二张图相对来说比较直观,就是JVM内存结构都划分成了哪些模块,各个 ...

  3. 《利用Python进行数据分析·第2版》第四章 Numpy基础：数组和矢量计算

    <利用Python进行数据分析·第2版>第四章 Numpy基础:数组和矢量计算 numpy高效处理大数组的数据原因: numpy是在一个连续的内存块中存储数据,独立于其他python内置对 ...

  4. 在react项目中使用redux or mobx？

    主要比较参数: 库体积,打包项目体积 开发体验 性能对比 在对比参数前首先分析一下redux和mobx的设计模式,redux和mobx都没有使用传统的mvc/mvvm形式,而且他们使用flux结构也略 ...

  5. Spring Cloud ---- 服务注册与发现（Eureka 找到了！找到了！ 嘻嘻）

    记录一下吧,为什么接触分布式.因为裸辞之后没有找到工作,好的公司都要求有分布式经验,但是我完全没有.在一次面试的时候,面试官说如果你会分布式架构的话,我可以把工资给你开高2.5,我就考虑着给我点时间, ...

  6. 闪讯 开启wifi教程

    这是我自己试了几次之后发现的,也不是什么技术活. 首先说下,我的比较是小米pro笔记本,一般笔记本都是自带wifi功能的.如果要开wifi的话,必须是用网线连接才可以,通过wifi连接网络就不能开移动 ...

  7. 字符编码 + python2和python3的编码区别(day08整理)

    目录 昨日回顾 二十三.元组内置方法 二十四.散列表 二十五.字典内置方法 二十六.集合内置方法 二十七.深浅拷贝 拷贝 浅拷贝 深拷贝 今日内容 二十八.字符编码 1.文本编辑器存储信息的过程 2. ...

  8. 优化 .net core 应用的 dockerfile

    优化 .net core 应用的 dockerfile Intro 在给 .net core 应用的写 dockerfile 的时候一直有个苦恼,就是如果有很多个项目,在 dockerfile 里写起 ...

  9. python中根据时间获取周数，通过周数获取时间

    # 时间## 时间和周数 import time import datetime # 获取今天是第几周 print(time.strftime('%W')) # 获取当前是周几(0-6,0代表周一) ...

  10. 设计模式（五）Singleton模式

    Singleton模式就是确保只生成一个实例的模式.这里有两个意思,即想确保任何情况下都绝对只有一个实例和想在程序上表现出“只存在一个实例”. 下面通过一个实例来说明这种设计模式. package B ...