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

下面是一波代码水军。







 <!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. JS实现时间选择器
			
    源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
    
			
    2. 
						
  2. 【每日Scrum】第四天冲刺
			
    一.计划会议内容 连接数据库报错,解决问题中. 二.任务看板 三.scrum讨论照片 四.产品的状态 无 五.任务燃尽图  
    
			
    3. 
						
  3. 洛谷P1002 过河卒（动态规划）
			
    题目描述 棋盘上 AA 点有一个过河卒,需要走到目标 BB 点.卒行走的规则:可以向下.或者向右.同时在棋盘上 CC 点有一个对方的马,该马所在的点和所有跳跃一步可达的点称为对方马的控制点.因此称之为 ...
    
			
    4. 
						
  4. PCB布局注意事项
			
    PCB布局注意事项   1.实现统一功能电路模块中的元件应采用就近集中原则,同时数字电路和模拟电路分开; 2.定位孔.标准孔等非安装孔周围1.27mm 内不得贴装元.器件,螺钉等安装孔周围3.5mm( ...
    
			
    5. 
						
  5. 特斯拉私有化VS蔚来上市，电动汽车站在十字路口上
			
    当下,对于电动汽车来说既是一个最好的时代,也是一个最坏的时代.好的一面是业界.投资者.消费者对电动汽车的关注度愈来愈高,坏的一面则是电动汽车正处于一个非常尴尬的处境.从大环境来看,电动汽车自身的产品力 ...
    
			
    6. 
						
  6. Nginx安全优化
			
    一.隐藏版本号 http { server_tokens off; } 经常会有针对某个版本的nginx安全漏洞出现,隐藏nginx版本号就成了主要的安全优化手段之一,当然最重要的是及时升级修复漏洞. ...
    
			
    7. 
						
  7. [Algo] 646. Store Number Of Nodes In Left Subtree
			
    Given a binary tree, count the number of nodes in each node’s left subtree, and store it in the numN ...
    
			
    8. 
						
  8. 深入理解spring中的AOP原理 —— 实现MethodInterceptor接口，自已动手写一个AOP
			
      1.前言 AOP是面向切面编程,即“Aspect Oriented Programming”的缩写.面对切面,就是面向我们的关注面,不能让非关注面影响到我们的关注面.而现实中非关切面又必不可少,例 ...
    
			
    9. 
						
  9. JavaSE--数字签名之校验签名
			
    参考:http://blog.csdn.net/dotuian/article/details/51722300 关于keystore的简单介绍 Keytool是一个Java数据证书的管理工具 ,Ke ...
    
			
    10. 
						
  10. 踏出第一步——安装并跑通python程序
			
    一.首先学会安装python软件 1.在浏览器下输入安装python软件的官方网址. 点击打开链接 2.在界面上点击"Downloads"下的"Windows" ...
    
			
    11.