说明

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

布局

布局即为简单,一个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. 使用svndumpfilter exclude来清理svn库的废弃文件实现差别备份

      先啰嗦下为什么要使用svndumpfilter… svn库用久了以后就会越来越大,进行整体文件打包备份的时候,发现压力山大…尤其是美术团队也在使用svn进行重要美术资源管理的时候…….几百g的资源 ...

  2. 基础之Lamada和Stream的邂逅

    show me the code and take to me,做的出来更要说的明白 GitHub项目JavaHouse同步收录 喜欢就点个赞呗! 你的支持是我分享的动力! 引入 是否有遇到看不懂身边 ...

  3. mysql:数据库与实例的区别

    题记:最近想更深入的了解mysql,所以买了一些书在学习,趁着这个机会开个坑,整理一下一些我认为重要的知识点. 刚工作那会经常能听到组长提到实例这个词,一开始我以为是服务器... 数据库(databa ...

  4. 处理样本不平衡的LOSS—Focal Loss

    0 前言 Focal Loss是为了处理样本不平衡问题而提出的,经时间验证,在多种任务上,效果还是不错的.在理解Focal Loss前,需要先深刻理一下交叉熵损失,和带权重的交叉熵损失.然后我们从样本 ...

  5. vue入门,vue指令,vue组件,vue模板

    vue 使用虚拟dom操作减少真实dom操作 提高页面的渲染效率 虚拟dom的本质就是内存中的一个对象,该对象和dom结构相互对应 将开发者经历从dom中释放出来,转移到数据的操作 开发者不需要关注页 ...

  6. centos7 安装jdk8和maven3

    centos7 安装jdk8和maven3 标签(空格分隔): java,linux jdk 第一种安装: yum install java-1.8.0-openjdk /usr/lib/jvm/ 默 ...

  7. [Micropython]TPYBoard v202 智能WIFI远控小车

    转载请注明文章来源,更多教程可自助参考docs.tpyboard.com,QQ技术交流群:157816561,公众号:MicroPython玩家汇 前言---------------------- 之 ...

  8. js六种数据类型

    六种数据类型: undefined . boolean  .string .number .object .function 效果地址:https://scrimba.com/c/cEedDGTd 代 ...

  9. 关于程序员须知的 linux 基础

    我在 github 上新建了一个仓库 日问,每天一道面试题,有关前端,后端,devops以及软技能,促进职业成长,敲开大厂之门,欢迎交流 并且记录我的面试经验 17年面试记(阿里百度美团头条小米滴滴) ...

  10. 位运算上的小技巧 - AtCoder

    Problem Statement There is an integer sequence of length 2N: A0,A1,…,A2N−1. (Note that the sequence ...