在写代码前，先做下准备工作，写两个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. css3实现饼状图进度及环形进度条

    1 <!-- 饼图 --> <div class="pie"></div> <hr /> <!-- 环形图 --> &l ...

  2. 玩转 RTC时钟库 DS3231

    1.前言     接着博主的上一篇 玩转 RTC时钟库 + DS1302,这一篇我们重点讲解DS3231时钟模块.没有看过上一篇的同学,麻烦先去阅读一下,因为很多理论基础已经在上一篇做了详细讲解,这里 ...

  3. Spring Cloud zuul网关服务 一

    上一篇进行Netflix Zuul 1.0 与 gateway的对比.今天来介绍一下 zuul的搭建及应用 Zuul 工程创建 工程创建 cloud-gateway-zuul.还是基于之前的工程 po ...

  4. 增强for循环遍历HashSet

    package cn.bdqn.chatpterone.keben; import java.util.*; public class TestHanshSet { public static voi ...

  5. Vue 的准备

    ## .es6的基本语法 ​ let---是局部作用于,不会存在变量提升,变量不能重复声明 ​ const--局部作用域,不会存在变量提升 不能重复声明,只声明常亮,不可变的量 ​ ```javasc ...

  6. 数据类型(三) + 流程控制(一) day05

    目录 昨日回顾 (三) 花式赋值 链式赋值 交叉赋值 (四) 列表list (五) 字典dict (六) 布尔值 (七) 解压缩 (八) python与用户交互的方式 (九) 三种格式化输出的方式 f ...

  7. fenby C语言 P12

    条件语句的嵌套 注意格式对齐 #include <stdio.h> int main(){ int score=67; if(score<=100&&score> ...

  8. DirectX9：第一章 初始化Direct3D

    一.Direct3D概述 Direct3D是一套底层图形API,可以被视为应用程序与图形设备交互的中介. 应用程序.Direct3D以及硬件之间的交互关系: 在Direct3D和图形设备之间有一个环节 ...

  9. Blazor之ABC

    .net core正式推出了Blazor, 正好在一个小项目里试用一下. 建立项目 因为基于WebAssemble的客户端Blazor还不是正式版, 为了避免不必要的麻烦,我试用服务端的Blazor. ...

  10. TICK技术栈（二）Telegraf安装及使用

    1.什么是Telegraf? Telegraf是一个用Go语言开发的代理程序,可用于收集和报告指标.Telegraf插件直接从其运行的系统中获取各种指标,从第三方API中提取指标,甚至通过StatsD ...