说明

对于初学者来说，块级元素的剧中，也是一大难题，我学习的时候，也是一脸懵逼，每次遇到都要百度，但是写的多了也自然记住一些常用的剧中方式，但是还是很模糊，今天就来好好总结一些。

布局

布局即为简单，一个div套着一个div，使inner1在wrap居中显示。

  1.  <body>
  2.      <div id="wrap">
  3.          <div class="inner1"></div>
  4.      </div>
  5.  </body>

水平剧中

  • margin: 0 auto;

    子元素的宽度小于父元素，不然子元素宽度等于父元素宽度，就没意义了。

  1.  #wrap{
  2.     width: 500px;
  3.     height: 500px;
  4.     margin: 0 auto;
  5.     background-color: red;
  6.  }
  8.   #wrap .inner1{
  9.     width: 100px;
  10.     height: 100px;
  11.     margin: auto;
  12.     background-color: blue;
  13.  }
  • 绝对定位 + 负外边距

    一开始我也不理解，看图一，当子元素left: 50%;它会以父元素为参照，定位到left值为父元素宽度的一半，如图1的有图，可以看到在将子元素向左移动自身宽度的一半即可水平剧中，因此加上margin-left: 50px;

  1.  #wrap{
  2.     width: 500px;
  3.     height: 500px;
  4.     margin: 0 auto;
  5.     position: relative;
  6.     background-color: red;
  7.  }
  9.   #wrap .inner1{
  10.     width: 100px;
  11.     height: 100px;
  12.     position: absolute;
  13.     left: 50%;
  14.     margin-left: -50px;
  15.     background-color: blue;
  16.  }

  • 绝对定位 + translateX

    上面的方式，有一个缺点，子元素高宽度要知道，但是兼容性好，transform为CSS3新属性，因此有兼容性问题，但是它不需要知道高度值。

  1.  #wrap{
  2.     width: 500px;
  3.     height: 500px;
  4.     margin: 0 auto;
  5.     position: relative;
  6.     background-color: red;
  7.  }
  9.   #wrap .inner1{
  10.     width: 100px;
  11.     height: 100px;
  12.     position: absolute;
  13.     left: 50%;
  14.     transform: translateX(-50%);
  15.     background-color: blue;
  16.  }

垂直居中

  • 绝对定位 + margin: auto 0;

    具体什么原理，我也不是很了解。设置top、bottpm为相同的值，不一定是 0，上下外边距auto即可。

  1.  #wrap{
  2.     width: 500px;
  3.     height: 500px;
  4.     margin: 0 auto;
  5.     position: relative;
  6.     background-color: red;
  7.  }
  9.   #wrap .inner1{
  10.     width: 100px;
  11.     height: 100px;
  12.     position: absolute;
  13.     top: 0;
  14.     bottom: 0;
  15.     margin: auto 0;
  16.     background-color: blue;
  17.  }
  • 绝对定位 + translateY

    原理与上面的水平居中：绝对得 + translateX的方式一样。

  1.  #wrap{
  2.     width: 500px;
  3.     height: 500px;
  4.     margin: 0 auto;
  5.     position: relative;
  6.     background-color: red;
  7.  }
  9.   #wrap .inner1{
  10.     width: 100px;
  11.     height: 100px;
  12.     position: absolute;
  13.     top: 50%;
  14.     transform: translateY(-50%);
  15.     background-color: blue;
  16.  }

注意

上面只是把水平、垂直居中分开来举例，想要实现水平垂直居中，只要把相应的结合在一起即可。另外我们还可以使用flex布局，实现水平、垂直居中，这里不再讨论了。

  • 绝对定位 + margin实现水平、垂直居中
  1.  //另外一种也如此
  2.  #wrap{
  3.     width: 500px;
  4.     height: 500px;
  5.     margin: 0 auto;
  6.     position: relative;
  7.     background-color: red;
  8.  }
  10.   #wrap .inner1{
  11.     width: 100px;
  12.     height: 100px;
  13.     position: absolute;
  14.     //left、top设置为 50%
  15.     top: 50%;
  16.     left: 50%;
  17.     //左、上边距再往回拉自身宽度的一本即可
  18.     margin-left: -50px;
  19.     margin-top: -50px;
  20.     background-color: blue;
  21.  }

html块级元素的水平垂、直居中的方式的更多相关文章

  1. CSS行内元素和块级元素的居中

    一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的marg ...

  2. CSS基础：块级元素与盒模型

    简介 在 HTML4.01 中,元素通常可以分为块级元素( “Block-level element” ) 和内联元素 ( "Inline-level element" ) 两大类 ...

  3. 让div等块级元素水平以及垂直居中的解决办法

    一.背景 我们在设计页面的时候,经常要把div等块级元素居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让div等块级元素居中.在本文中,我将 ...

  4. CSS 各类 块级元素 行级元素 水平 垂直 居中问题

    元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 行级元素 一块级元素 1 水平居中: ( ...

  5. 深入学习CSS外边距margin（重叠效果，margin传递效果，margin:auto实现块级元素水平垂直居中效果）

    前言 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪 ...

  6. CSS居中问题：块级元素和行级元素在水平方向以及垂直方向的居中问题

    元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 块级元素 块级元素水平居中 1:marg ...

  7. HTML 行内元素和块级元素的理解及其相互转换

    块级元素:div, p(段落), form(表单), ul(无序列表), li(列表项), ol(有序列表), dl(定义列表), hr(水平分割线), menu(菜单列表), table(表格).. ...

  8. Code笔记之：CSS块级元素、内联元素概念

    文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...

  9. CSS 中的内联元素、块级元素以及display的各个属性的特点

    CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-le ...

随机推荐

  1. ELK学习实验013：ELK的一个完整的配置操作

    前面做了关于ELK组件的各个实验,但是并没有真正的把各个组件结合起来做一个实验,现在使用一个脚本简单的生成日志,模拟生产不断产生日志的效果 一 流程说明 使用脚本产生日志,模拟用户的操作 日志的格式 ...

  2. Spring JDBC操作数据库示例

    1.所需jar包 <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncodi ...

  3. CSS3(4)---动画(animation)

    CSS3(4)---动画(animation) 之前有写过过渡:CSS3(2)--- 过渡(transition) 个人理解两者不同点在于 过渡 只能指定属性的 开始值 与 结束值,然后在这两个属性值 ...

  4. [01]java基础回顾

    00 Java语言       由美国SUN公司发明于1995年,是目前业界应用最广泛.使用人数最多的语言,连续多年排名世界第一,可以称之为“计算机语言界的英语”. Java广泛应用于企业级软件开发. ...

  5. selenium自动化之xpath定位*必会技能*

    相信写过ui自动化,对xpath定位感觉会特别亲戚,那么下面给大家分享些我们常常在写脚本时易忽略的一些小细节和技巧.首先使用xpath定位时切忌 不要使用带有空格的属性 不要使用自动生成的id.cla ...

  6. 小米6X谷歌套件

    话不多说真机测试完美适配,安卓万物基于谷歌链接如下(个别MIUI版本不同谷歌商店会报错,如遇到请留言我会第一时间回复解决) 链接:https://pan.baidu.com/s/1b2Cs0u9J2b ...

  7. 830. String Sort

    830. String Sort 题解 int alpha[256] = {0};//记录字符的次数 bool cmp(char a,char b) { if(alpha[a]==alpha[b])/ ...

  8. C#调用Fortran生成的DLL的方法报内存不足

    最近在研究一个程序,公司给的,程序是VB写的,程序里面还有一个计算的模型,用Fortran语言写的. 在调试到这个模型里面的方法时报错,说是内存不足,于是就在网上查找方法,看了两篇博客之后问题解决了. ...

  9. 跟着知识追寻者学BeautifulSoup，你学不会打不还口，骂不还手

    一 前言 Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库:其强大的提取能力让知识追寻者放弃了使用正则匹配查找HTML节点:Beautifu Soup 其能直接 ...

  10. 常用crud

    增:@Insert("insert into  t_user (`last_name`, `sex`) values(#{lastName}, #{sex})")   删:@Del ...