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

下面是一波代码水军。







 <!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. 记Windows下初次使用dev C++进行socket编程过程
			
    记初次接触socket编程,在devC++使用Winsock进行socket编程的一个过程,通过在devC++创建2个项目分别是server.client程序项目,感受通过socket使client与 ...
    
			
    2. 
						
  2. 关于typedef的一些小知识
			
    //关于typedef //1.在c语言中定义一个结构体typedef struct student{ int a;}stu;//typedef 给结构体起了个别名 stu;//于是,在声明变量的时候 ...
    
			
    3. 
						
  3. 软件设计之基于Java的连连看小游戏（三）——所有功能的实现
			
    新年快乐!期末接二连三的考试实在太忙了忘记连连看没有更新完,今天想要学习生信时才发现.所以这次直接把连连看所有功能全部放上. 在传统的连连看的基础上,我增加了上传头像的功能,即可以自行上传图片作为游戏 ...
    
			
    4. 
						
  4. MySQL中间件介绍
			
    360 Atlas Atlas是由 Qihoo 360, Web平台部基础架构团队开发维护的一个基于MySQL协议的数据中间层项目.它是在mysql-proxy 0.8.2版本的基础上,对其进行了优化 ...
    
			
    5. 
						
  5. ES系列之Promise async 和 await
			
    概述 promise是异步编程的一种解决方案,比传统的解决方案—回调函数和事件—更合理更强大. 所谓的promise就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作的结果). Pro ...
    
			
    6. 
						
  6. HDU 1298 T9 字典树+DFS
			
    必须要批评下自己了,首先就是这个题目的迟疑不定,去年做字典树的时候就碰到这个题目了,当时没什么好的想法,就暂时搁置了,其实想法应该有很多,只是居然没想到. 同样都是对单词进行建树,并插入可能值,但是拨 ...
    
			
    7. 
						
  7. 在阿里做了5年技术Leader，我总结出这些套路！
			
    转自 51CTO技术栈 内容 团队建设 团队管理 团队文化 沟通与辅导 招聘与解雇 互联网公司的技术团队管理通常分为两个方向:技术管理和团队管理,互联网公司的技术 TL 与传统软件公司的 PM 还是有 ...
    
			
    8. 
						
  8. shell 命令综合实战
			
    此篇为运维人员(开发)经常使用的查看系统状态的相关命令,主要综合了awk,grep ,sed等文本处理命令,能够大大提高工作效率,在此做个简单分享,也便于自己以后查找,毕竟好记性不如烂笔头. 获取et ...
    
			
    9. 
						
  9. 业内首发 | 区块链数据服务 - BDS
			
    区块链数据服务(Blockchain Data Service,BDS)是京东云区块链产品部发推出的,其将区块链的链式.非结构化数据通过技术手段进行结构化存储,实时同步到高性能数据仓库中. 用户可以通 ...
    
			
    10. 
						
  10. XssFilter EscapeUtil
			
    package com.ruoyi.framework.config; import java.util.HashMap; import java.util.Map; import javax.ser ...
    
			
    11.