说明

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

布局

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

 <body>

     <div id="wrap">

         <div class="inner1"></div>

     </div>

 </body>

水平剧中

  • margin: 0 auto;

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

 #wrap{

    width: 500px;

    height: 500px;

    margin: 0 auto;

    background-color: red;

 }

  #wrap .inner1{

    width: 100px;

    height: 100px;

    margin: auto;

    background-color: blue;

 }
  • 绝对定位 + 负外边距

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

 #wrap{

    width: 500px;

    height: 500px;

    margin: 0 auto;

    position: relative;

    background-color: red;

 }

  #wrap .inner1{

    width: 100px;

    height: 100px;

    position: absolute;

    left: 50%;

    margin-left: -50px;

    background-color: blue;

 }

  • 绝对定位 + translateX

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

 #wrap{

    width: 500px;

    height: 500px;

    margin: 0 auto;

    position: relative;

    background-color: red;

 }

  #wrap .inner1{

    width: 100px;

    height: 100px;

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    background-color: blue;

 }

垂直居中

  • 绝对定位 + margin: auto 0;

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

 #wrap{

    width: 500px;

    height: 500px;

    margin: 0 auto;

    position: relative;

    background-color: red;

 }

  #wrap .inner1{

    width: 100px;

    height: 100px;

    position: absolute;

    top: 0;

    bottom: 0;

    margin: auto 0;

    background-color: blue;

 }
  • 绝对定位 + translateY

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

 #wrap{

    width: 500px;

    height: 500px;

    margin: 0 auto;

    position: relative;

    background-color: red;

 }

  #wrap .inner1{

    width: 100px;

    height: 100px;

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background-color: blue;

 }

注意

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

  • 绝对定位 + margin实现水平、垂直居中
 //另外一种也如此

 #wrap{

    width: 500px;

    height: 500px;

    margin: 0 auto;

    position: relative;

    background-color: red;

 }

  #wrap .inner1{

    width: 100px;

    height: 100px;

    position: absolute;

    //left、top设置为 50%

    top: 50%;

    left: 50%;

    //左、上边距再往回拉自身宽度的一本即可

    margin-left: -50px;

    margin-top: -50px;

    background-color: blue;

 }

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. 电脑端TIM登录时记住密码

    为什么每次登录TIM时点了记住密码,下次再登录时还是记不住呢? 不是扫码就是还得输出密码,为这事愁了好多次, 最近终于发现如何记住密码了... 进入登录界面以后,点击左下角这个小图标>> ...

  2. HDU3555 Bomb 题解 数位DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3555 题目大意:求 \([1,n]\) 范围内有多少数包含"49". 解题思路: ...

  3. 从头学pytorch(十四):lenet

    卷积神经网络 在之前的文章里,对28 X 28的图像,我们是通过把它展开为长度为784的一维向量,然后送进全连接层,训练出一个分类模型.这样做主要有两个问题 图像在同一列邻近的像素在这个向量中可能相距 ...

  4. Django 多表、跨表、聚合、分组查询

    前期准备: 创建表 class Book(models.Model): title = models.CharField(max_length=32) price = models.DecimalFi ...

  5. 22.Python安装和卸载第三方模块方法

    安装和卸载第三方开源模块的步骤:下例,安装urllib3模块的步骤. 1.安装开源模块步骤: 按键盘windows键+r键,输出cmd回车.或开始->windows系统->命令提示符: 输 ...

  6. 9.python中sys.argv[]用法说明

    在python中sys.argv[]是用来获取命令行输入的参数的(参数和参数之间空格区分),sys.argv[0]表示代码本身文件路径,所以从参数1开始,表示获取的参数了 举例说明:创建一个程序名为t ...

  7. 2018 东北地区大学生程序设计竞赛(ABEHIK)

    HDU6500:Problem A. Game with string 题意: 给你一个字符串s以及它的m个子串的首尾位置,现在Alice和 Bob两个人轮流在任一子串的前面或者后面加1个字符,要求加 ...

  8. Collection 的子类 List

    List集合的一些使用方法: 一. 声明集合: List<String> list = new ArrayList<String>(); 二.往集合里面添加元素 list.ad ...

  9. file_get_contents函数获取不到数据的一种情况

    问题:  file_get_contents($url) 获取不到数据,尽管URL地址正确,函数使用正确.如下代码 $url = "https://www.baidu.com"; ...

  10. SpringBoot 2.x 开发案例之 Shiro 整合 Redis

    前言 前段时间做了一个图床的小项目,安全框架使用的是Shiro.为了使用户7x24小时访问,决定把项目由单机升级为集群部署架构.但是安全框架shiro只有单机存储的SessionDao,尽管Shrio ...