1.Flexbox布局:

display:flex;
justify-content:center;
align-items:center;
width:100%;

2.Bootstrap栅格布局

一共12格,分成3块,每块占4列。居中的内容写在中间的那一块。

3.圣杯/双飞翼(水平自适应居中的基础上)

第一步:居中的div写在最前面,width:100%撑满一整行。三个div都向左浮动float:left;

<div class="main">Main</div>
<div class="left">Left</div>
<div class="right">Right</div>

第二步:让三个div显示在同一行

div.left { marin-left:100%}
div.right{ marin-left:自身的宽度}

第三步:让中间的div能够自适应

圣杯布局的做法:

div.main{
padding-left:左div的宽度;
padding-right:右div的宽度;
}

双飞翼布局的做法:

div.main内部再添加一个div.mc

然后设置div.mc的margin

margin-left:左div的宽度;
margin-right:右div的宽度;

现在,水平居中已经实现了;

第四步:垂直居中



div.left,div.right,div.main外面再加一个div.wrap,

然后对div.con设置 display:table,对div.wrap设置

display:table-cell;
vertical-align:middle;

4.relative/positive + top/left+tarnsform

父元素:

position:relative

子元素:

position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);

transform: translate(-50%, -50%);意思是向右移动自身50%的宽度,向下移动自身50%的高度。

为什么有了top:50%;left:50%还要 transform: translate(-50%, -50%);

最初:

加了top:50%;left:50%后:

还需要再往左、往上挪一挪:

5.relative/positive + top/left+left + margin

和方法4一样,用top和left挪到中间:

这之后用margin-leftmargin-right进行处理:

先给div.child设置宽度,然后设置margin

6.用top,left,bottom,right

计算公式:

top + div.child 的 height +bottom = div.parent 的 height

left + div.child 的 width +right = div.parent 的 width

如果子元素是行内元素,如<p>,要注意一开始就要去掉margin和padding

方法4、5、6有的demo,详见 github

div自适应水平垂直居中的方法的更多相关文章

  1. div盒子水平垂直居中的方法推荐

    父盒子是position:relative 方法一:(宽高确定) div绝对定位水平垂直居中[margin 负间距], 方法二: (宽高确定) div绝对定位水平垂直居中[margin:auto实现绝 ...

  2. div盒子水平垂直居中的方法

    这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用.内容块定义t ...

  3. DIV文字水平垂直居中的方法

    水平居中 text-align:center 垂直居中(vertical-align) vertical-align:middle; vertical-align时而没效果 然而真实使用的时候,我们会 ...

  4. div盒子水平垂直居中方法

    文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...

  5. 一个div在另一个div中水平垂直的方法

    html <div id="main"> <div id="box"> 一个div在另一个div中垂直居中实现方法 </div&g ...

  6. 53.CSS---CSS水平垂直居中常见方法总结

    CSS水平垂直居中常见方法总结 1.元素水平居中 当然最好使的是: margin: 0 auto; 居中不好使的原因: 1.元素没有设置宽度,没有宽度怎么居中嘛! 2.设置了宽度依然不好使,你设置的是 ...

  7. Div实现水平垂直居中

    在实际应用中很多地方不仅要求实现元素的水平居中或者垂直居中效果,还可能会在水平方向和垂直方向上都要实现居中效果,下面就简单介绍几种元素水平垂直居中的方法(注:不同的方法会存在一些优缺点以及兼容性问题) ...

  8. css3 flex 详解,可以实现div内容水平垂直居中

    先说一下flex一系列属性: 一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row- ...

  9. css的div动态水平垂直居中

      div动态水平垂直居中,思路如下: (1)先定位.如果相对于距离最近的父元素,用absolute:如果相对于body,用fixed. (2)然后,top和left都设为50%. (3)要居中的di ...

随机推荐

  1. Effective C++ .14 智能指针的拷贝与deleter函数

    #include <iostream> #include <cstdlib> #include <memory> using namespace std; clas ...

  2. flask 简易注册登陆

    db.py import MySQLdb conn = MySQLdb.connect(', 'test1') cur = conn.cursor() def addUser (username,pa ...

  3. static修饰java内部运行顺序

    package com.demo01; public class Static extends demo{ /** * @param args */ private static String str ...

  4. csharp: Converting chinese character to Unicode

    Function chinese2unicode(Str) Dim Str_one:Str_one = "" Dim Str_unicode:Str_unicode = " ...

  5. 浮动的补充丶文本和字体属性丶background丶定位

    一丶浮动的补充 浮动的特性: 1. 浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素有"字围"效果 4.浮动的元素有收缩的效果 前提是标准文档流,margin的垂直方向会出现 ...

  6. Python入门-深浅拷贝

    首先我们在这里先补充一下基础数据类型的一些知识: 一.循环删除 1.前面我们学了列表,字典和集合的一些操作方法:增删改查,现在我们来看一下这个问题: 有这样一个列表: lst = ['周杰伦','周润 ...

  7. MySQL--localhost、局域网、外网访问MySQL

    安装环境: MySQL版本:mysql-installer-community-5.7.22.1.msi,64位 计算机:Windows7旗舰版,64位 本机的局域网IP为:192.168.2.230 ...

  8. 01_Jdk自带SPI

    [SPI的设计目标] 面向对象的设计里,模块之间是基于接口编程,模块之间不对实现类进行硬编码. 一旦代码里设计具体的实现类,就违法了可插拔的原则,如果需要替代一种实现,就要修改代码. 为了实现在模块装 ...

  9. dom操作排他思想

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. InputStream中mark方法使用

    在调用mark的地方做上标记,参数readlimit说明在读取readlimit个字符后书签做废(6.0好像没有失效 ,仍然可以标记位置),使用reset后回到标记的位置.import java.io ...