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

下面是一波代码水军。







 <!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. 京东云入选2019年度TOP100全球软件案例 新一代服务治理框架加速行业落地
			
    11月14日-17日, 2019TOP100全球软件案例研究峰会(TOP100summit)在北京国家会议中心举办.Top100summit是科技界一年一度的案例研究峰会,每年会秉承"从用户 ...
    
			
    2. 
						
  2. 吴裕雄--天生自然MySQL学习笔记：MySQL WHERE 子句
			
    MySQL 表中使用 SQL SELECT 语句来读取数据. 如需有条件地从表中选取数据,可将 WHERE 子句添加到 SELECT 语句中. 语法 以下是 SQL SELECT 语句使用 WHERE ...
    
			
    3. 
						
  3. Leetcode第1题：两数之和
			
    给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的 两个 整数.你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同样的元素.示例:给定 nums  ...
    
			
    4. 
						
  4. linux下的hashpump安装
			
    hashpump是linux上的一个进行hash长度拓展攻击的工具 安装: git clone https://github.com/bwall/HashPump apt-get install g+ ...
    
			
    5. 
						
  5. html中的标签总结
			
    HTML <ul> 元素(或称 HTML 无序列表元素)表示一个内可含多个元素的无序列表或项目符号列表 <ol>元素中的顺序是有意义的 <ul> 元素用来将没有数字 ...
    
			
    6. 
						
  6. Mybatis之一级缓存（七）
			
    1. 介绍 Mybatis缓存分为一级缓存和二级缓存,在本节中我们介绍下一级缓存的使用及其特性 MyBatis的一级缓存是在一个Session域内有效的,当Session关闭后,缓存内容也随之销毁.缓 ...
    
			
    7. 
						
  7. h5与安卓、ios交互
			
    1.安卓交互 h5调用安卓方法 window.webview.xxx() 安卓调用h5方法, 方法需要在全局注册 window['showUnreadMsg'] = () => { this.$ ...
    
			
    8. 
						
  8. Python实现Collatz序列(考拉兹猜想)
			
    考拉兹猜想(英语:Collatz conjecture),又称为奇偶归一猜想.3n+1猜想.冰雹猜想.角谷猜想.哈塞猜想.乌拉姆猜想或叙拉古猜想,是指对于每一个正整数,如果它是奇数,则对它乘3再加1, ...
    
			
    9. 
						
  9. zabbix自定义邮件报警
			
    1.启动动作 2.设定发件人邮箱 进入QQ邮箱: 通过短信验证开启如下服务,并生成授权码: 3.配置收件人
    
			
    10. 
						
  10. jsp动作标签学习
			
    <jsp:useBean> <jsp:useBean>标签用于在指定的域范围内查找指定名称的JavaBean对象,如果存在则直接返回该JavaBean对象的引用,如果不存在则实 ...
    
			
    11.