在平时,我们经常会碰到让一个div框针对某个模块上下左右都居中(水平垂直居中),其实针对这种情况,我们有多种方法实现。

方法一:

  绝对定位方法:不确定当前div的宽度和高度,采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位(position: relative;)

  图片展示:

  

  代码如下:

div{
background:red;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}

 

方法二:

  绝对定位方法:确定了当前div的宽度,margin值为当前div宽度一半的负值

  图片展示: 如方法一的图片展示

  代码如下:

div{
width:600px;
height: 600px;
background:red;
position: absolute;
left:50%;
top:50%;
margin-left:-300px;
margin-top:-300px;
}

  

方法三:

  绝对定位方法:绝对定位下top left right bottom 都设置0

  图片展示: 如方法一的图片展示

  代码如下:

<!--html-->
<div class="child">我是子级</div>
/**css**/
div.child{
width: 600px;
height: 600px;
background: red;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}

  

方法四:

  flex布局方法:当前div的父级添加flex css样式

展示图如下:

  

  代码如下:

<!--html-->
<div class="box">
<div class="child">child</div>
</div>
/**css**/
.box{
height:800px;
-webkit-display:flex;
display:flex;
-webkit-align-items:center;
align-items:center;
-webkit-justify-content:center;
justify-content:center;
border:1px solid #ccc;
}
div.child{
width:600px;
height:600px;
background-color:red;
}

  

方法五:

  table-cell实现水平垂直居中: table-cell middle center组合使用

展示图如下:

代码如下:

<!--html-->
<div class="table-cell">
<p>我爱你</p>
</div>
/**css**/
.table-cell {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 240px;
height: 180px;
border:1px solid #666;
}

  

方法六:

  绝对定位:calc() 函数动态计算实现水平垂直居中

  展示图如下:

  代码如下:

<!--html-->
<div class="calc">
<div class="child">calc</div>
</div>
/**css**/
.calc{
position: relative;
border: 1px solid #ccc;
width: 400px;
height: 160px;
}
.calc .child{
position: absolute;
width: 200px;
height: 50px;
left:-webkit-calc((400px - 200px)/2);
top:-webkit-calc((160px - 50px)/2);
left:-moz-calc((400px - 200px)/2);
top:-moz-calc((160px - 50px)/2);
left:calc((400px - 200px)/2);
top:calc((160px - 50px)/2);
}  

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

  1. 未知宽高div水平垂直居中3种方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...

  2. 【笔记】让DIV水平垂直居中的两种方法

    今天写的了百度前端学院春季班的任务:定位和居中问题  由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...

  3. Div水平垂直居中的三种方法

    百度了很多种方法,很多是不起作用的.下面这些方法是我亲自试过的.希望对大家有帮助! 下面是一波代码水军. <!DOCTYPE html> <html lang="en&qu ...

  4. 如何让div水平垂直居中

    引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...

  5. 【最全】CSS盒子(div)水平垂直居中居然还有这种方式

    最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...

  6. 文字以及div水平垂直居中

    文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...

  7. DIV水平垂直居中的CSS兼容写法

    DIV水平垂直居中,非IE浏览器可以用CSS3来处理,IE浏览器中分别处理IE6和/IE7.IE8.IE9. 在IE低版本中,虽然大致上没有问题,但还是有一些细微的显示问题. 示例如下: <!D ...

  8. scss : div水平垂直居中

    scss 是一个很好用的css预处理语言,有很多很好的特性. 比如 mixin. 我们可以像使用函数那样使用mixin. 比如写一个div水平垂直居中. 上代码. @mixin absolute_ce ...

  9. 如何将一个div水平垂直居中?4种方法做推荐

    方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...

随机推荐

  1. C++:类中创建线程

    #include <iostream> #include <stdio.h> #include <stdlib.h> #include <iostream&g ...

  2. 学习笔记22_AspMvc简介

    *Mvc和webForm区别 1. Mvc模式下,前台和后台的交流,是后台提供数据,使用对象包裹的形式,前台来使用,类似于webForm定义一个属性那样. 2.Mvc模式下,再也不是使用this.la ...

  3. CSPS模拟 87

    考场上思考量不可减少 否则分数秒变弟弟,考后秒变弱智 T1 二分答案.打的稍恶心 T2 线段树维护“如果我在这个点开枪,前方点的贡献有多大” 想明白了就很好理解了 另外已经飞过去八千里的鸟还输入进来干 ...

  4. Scrapy进阶知识点总结(六)——中间件详解

    概述 查看scrapy官网的框架图,可以看出中间件处于几大主要组件之间,类似于生产流水线上的加工过程,将原料按照不同需求与功能加工成成品 其中4,5处于下载器与引擎之间的就是下载中间件,而spider ...

  5. Scrapy进阶知识点总结(三)——Items与Item Loaders

    一.Items 抓取的主要目标是从非结构化源(通常是网页)中提取结构化数据.Scrapy蜘蛛可以像Python一样返回提取的数据.虽然方便和熟悉,但Python缺乏结构:很容易在字段名称中输入拼写错误 ...

  6. 2、linux基础-面试题

    自己写的答案 1.1GB 2.4 3.ubuntu.dbian.Fedora 4.系统.硬件.clock -w 5.文件 6.uname -a 7.centos是redhat的社区版,redhat是商 ...

  7. T-SQL, Part II: IMAGE/TEXT Insert

    To insert data to IMAGE/TEXT (both keywords are recommend to replace with nvarbinary(MAX)/nvarchar(M ...

  8. mysql查询不重复的行内容,不重复的记录数.count,distinct

    有这么一个表 记录了id, p_id, p_name , p_content , p_time 1  343        aaa            aaaaaa   2012-09-01 2   ...

  9. nyoj 68-三点顺序(叉积)

    68-三点顺序 内存限制:64MB 时间限制:1000ms 特判: No 通过数:3 提交数:5 难度:3 题目描述: 现在给你不共线的三个点A,B,C的坐标,它们一定能组成一个三角形,现在让你判断A ...

  10. fiddler工具使用大全

    Fiddler基础知识 Fiddler是强大的抓包工具,它的原理是以web代理服务器的形式进行工作的,使用的代理地址是:127.0.0.1,端口默认为8888,我们也可以通过设置进行修改. 代理就是在 ...