Div水平垂直居中的三种方法
百度了很多种方法，很多是不起作用的。下面这些方法是我亲自试过的。希望对大家有帮助！
下面是一波代码水军。
<!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水平垂直居中的三种方法的更多相关文章
- 【笔记】让DIV水平垂直居中的两种方法
今天写的了百度前端学院春季班的任务:定位和居中问题 由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...
- 如何将一个div水平垂直居中？4种方法做推荐
方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...
- 如何将一个div水平垂直居中？6种方法做推荐
方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...
- 让div水平垂直居中的几种方法
最近,公司招了一批新人,吃饭的时候恰好碰到一个新同事,就跟他聊了起来.听他说了主管面试的时候出的一些问题,其中一个问题我印象特别深刻,因为,我当年进来的时候,也被问到这个问题.虽然这个问题已经问烂了, ...
- 未知宽高div水平垂直居中的3种方法
方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- 关于div水平垂直居中的几种方法
Dom结构: <div class="box"> <div class="inner"> 123 </div> </d ...
- 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点？ 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝
第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...
- 05. flex元素水平垂直居中（三种position水平垂直居中和两种新老版本水平垂直居中）
flex元素水平垂直居中(三种position水平垂直居中和两种新老版本水平垂直居中) (1).position : <!DOCTYPE html> <html lang=" ...
- CSS水平垂直居中的几种方法2
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
随机推荐
- 题解 Luogu P5434: 有标号荒漠计数
妈妈我终于会这道题了! 设\(n\)个点的有根仙人掌个数的指数型生成函数(EGF)为\(F(x)\), 令\(f_i = [x^n]F(x)\) 对于\(f_i\), 我们考虑钦点\(1\)号点为根, ...
- HTML-基础标记
HTML, 一种超文本标记语言,顾名思义,要比文本的样式多,而且是由标记组成,还是一门语言. 标记写法 <标记名> <a></a>双标记 超链接 <br /& ...
- clion之CMakeLists的学习
什么是CMake CMake是一个跨平台的安装(编译)工具,可以用简单的语句来描述所有平台的安装(编译过程).他能够输出各种各样的makefile或者project文件,能测试编译器所支持的" ...
- POJ-2492 A Bug's Life（种类并查集）
http://poj.org/problem?id=2492 题意: 给出一个T代表几组数据,给出一个n一个m,代表人的编号由1~n,m条命令,每条命令由两个数值组成,代表这两个人性别不同,问所有命令 ...
- 吴裕雄--天生自然MySQL学习笔记：MySQL UPDATE 更新
如果需要修改或更新 MySQL 中的数据,我们可以使用 SQL UPDATE 命令来操作. 语法 以下是 UPDATE 命令修改 MySQL 数据表数据的通用 SQL 语法: UPDATE table ...
- 吴裕雄--天生自然 PHP开发学习：数组
<?php $cars=array("Volvo","BMW","Toyota"); echo "I like " ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习：Math（算数） 对象
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 正文内容 python3编码问题
来源:http://www.jb51.net/article/92006.htm 以下是全文: 这两天写了个监测网页的爬虫,作用是跟踪一个网页的变化,但运行了一晚出现了一个问题....希望大家不吝赐教 ...
- 201771010123汪慧和《面向对象程序设计JAVA》第七周实验总结
一.理论部分 1.继承 如果两个类存在继承关系,则子类会自动继承父类的方法和变量,在子类中可以调用父类的方法和变量,如果想要在子类里面做一系列事情,应该放在父类无参构造器里面,在java中,只允许单继 ...
- NetWork--HTTPS 原理解析<转>
转载链接:https://www.cnblogs.com/zery/p/5164795.html HTTPS 原理解析 一 前言 在说HTTPS之前先说说什么是HTTP,HTTP就是我们平时浏览网 ...