百度了很多种方法，很多是不起作用的。下面这些方法是我亲自试过的。希望对大家有帮助！

下面是一波代码水军。







 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>设置div水平垂直居中</title>

     <style>

         *{

             margin: 0px;

             padding: 0px;

         }

         /*方法一*/

         #cell {

             display: table-cell;

             vertical-align: middle;

             height: 400px;

             width: 400px;

             background: lightcoral;

         }

         .content{

             margin: 0 auto;

             height: 200px;

             width: 200px;

             background: lightgreen;

         }

         /*方法二*/

         .outer{

             position: relative;

             width: 500px;

             height: 400px;

             background: coral;

         }

         .inner{

             position: absolute;

             top:50%;

             left: 50%;

             -webkit-transform: translate(-50%, -50%);

             transform: translate(-50%, -50%);

             width: 200px;

             height: 200px;

             background: yellowgreen;

         }

         /*方法三*/

         .middle-panel{

             height:100px;

             width:200px;

             background: peru;

         }

         .parent-panel{

             width: 400px;

             height:300px;

             background: paleturquoise;

             /**主要代码：

             display: flex是前提

             align-items设置垂直居中；

             justify-content设置水平居中*/

             display: flex;

             align-items: center;

             justify-content: center;

         }

 </style>

 </head>

 <body>

 <!--方法一-->

     <div id="cell">

         <div class="content">Content goes here</div>

     </div>

 <!--方法二-->

 <div class="outer">

     <div class="inner"></div>

 </div>

 <!--方法三-->

 <div class="parent-panel">

     <div class="middle-panel">

     </div>

 </div>

 </body>

 </html>




												


											
Div水平垂直居中的三种方法的更多相关文章
	

    
								
  1. 【笔记】让DIV水平垂直居中的两种方法
		
    今天写的了百度前端学院春季班的任务:定位和居中问题  由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...
    
		
    2. 
						
  2. 如何将一个div水平垂直居中？4种方法做推荐
		
    方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...
    
		
    3. 
						
  3. 如何将一个div水平垂直居中？6种方法做推荐
		
    方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...
    
		
    4. 
						
  4. 让div水平垂直居中的几种方法
		
    最近,公司招了一批新人,吃饭的时候恰好碰到一个新同事,就跟他聊了起来.听他说了主管面试的时候出的一些问题,其中一个问题我印象特别深刻,因为,我当年进来的时候,也被问到这个问题.虽然这个问题已经问烂了, ...
    
		
    5. 
						
  5. 未知宽高div水平垂直居中的3种方法
		
    方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
    
		
    6. 
						
  6. 关于div水平垂直居中的几种方法
		
    Dom结构: <div class="box"> <div class="inner"> 123 </div> </d ...
    
		
    7. 
						
  7. 手写面试编程题- 数组去重  深拷贝  获取文本节点  设置奇数偶数背景色  JS中检测变量为string类型的方法  第6题闭包  将两个数组合并为一个数组  怎样添加、移除、移动、复制、创建和查找节点？  继承  对一个数组实现随机排序  让元素水平 垂直居中的三种方式  通过jQuery的extend方法实现深拷贝
		
    第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...
    
		
    8. 
						
  8. 05. flex元素水平垂直居中（三种position水平垂直居中和两种新老版本水平垂直居中）
		
    flex元素水平垂直居中(三种position水平垂直居中和两种新老版本水平垂直居中) (1).position : <!DOCTYPE html> <html lang=" ...
    
		
    9. 
						
  9. CSS水平垂直居中的几种方法2
		
    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. JZOJ-TGB817-SOL
			
    T1 题面 "封印大典启动,请出Nescafe魂珠!"随着圣主applepi一声令下,圣剑护法rainbow和魔杖护法freda将Nescafe魂珠放置于封印台上.封印台是一个树形 ...
    
			
    2. 
						
  2. （day 1）创建项目--1
			
    1.利用cmd(命令行)创建项目myblog 确定好项目要放在哪个directory. dir一下创建好的项目看下有什么 django自带有一个小型的服务器可通过  runserver 启动它 可取浏 ...
    
			
    3. 
						
  3. CentOS 7.3 下部署基于 Node.js的微信小程序商城
			
    本文档为微信小程序商城NideShop项目的安装部署教程,欢迎star NideShop商城api服务:https://github.com/tumobi/nideshop NideShop微信小程序 ...
    
			
    4. 
						
  4. Jenkins 插件中心国内镜像源发布
			
    以下文章来源于Jenkins,作者LinuxSuRen Jenkins 社区的网络基础设施都是架设在国外的服务器上,而且,并没有在国内有 CDN 或者负载均衡的配置.对所有的 Jenkins 用户而言 ...
    
			
    5. 
						
  5. Nginx无法监听虚拟VIP的问题报：99: Cannot assign requested address
			
    99: Cannot assign requested address #本地网卡上没有10.0.0.3这个IPNginx就会报错: [root@lb01 conf]# /application/ng ...
    
			
    6. 
						
  6. Java并发分析—Lock
			
    1.Lock 和 Condition 当使用synchronied进行同步时,可以在同步代码块中只用常用的wait和notify等方法,在使用显示锁的时候,将通过Condition对象与任意Lock实 ...
    
			
    7. 
						
  7. 同行评审|keywords
			
    审稿流程: 初审 直接被拒,editor开组会讨论的结果 论文水平低 不符合刊物宗旨和要求 同行评审: 单盲评审 双盲评审:限制审稿人倾向 公开评审PNAS Analyse search result ...
    
			
    8. 
						
  8. MYSQL8用户创建及权限操作
			
    MYSQL8创建.删除用户和授权.消权操作 上网找过资料说要进入mysql数据库在进行这些操作,我试了发现不进数据库和进入mysql数据库效果都一样 网上有的直接创建并赋权,像酱紫的: grant a ...
    
			
    9. 
						
  9. win10编译tensorflow C++接口
			
    ​原文地址:https://www.bearoom.xyz/2018/08/28/win10-build-tf-cc/ 首先,我觉得这是一个比较DT的活,因为,tensorflow支持最好的编程语言应 ...
    
			
    10. 
						
  10. Qt QRect与QRectF的区别
			
    一直在与QRect和QRectF打交道.甚至在使用过程中因为QRect而出现了致命的Bug.因为QRect在数据存储表示上有一个很大的“历史遗留问题”! QRect Class   也就是说,对于QR ...
    
			
    11.