说明

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

布局

布局即为简单，一个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. 洛谷$P4316$ 绿豆蛙的归宿 期望

    正解:期望 解题报告: 传送门! 看懂题目还是挺水的$(bushi$ 三个方法,但因为题目太水了懒得一一介绍了,,,反正都是期望,,,$so$随便港个最简单的趴$QwQ$ 直接考虑每条边的贡献,就会是 ...

  2. 洛谷P1147 连续自然数和 题解 枚举

    题目链接:https://www.luogu.com.cn/problem/P1147 题目大意: 给你一个数 \(M\) ,求有多少对连续自然数对之和为 \(M\),输出这列连续自然数对的首项和末项 ...

  3. Linux下卸载oracle需要删除的文件

    卸载oracle需要删除的文件 rm -rf /data1/oracle/app  #oracle安装目录在/data1/oracle中 rm -rf /usr/local/bin/dbhome rm ...

  4. 鼠标右键新建Markdown文档

    首先放一张github某项目中.md文件中的内容图片 Windows系统下,使用 Typora 软件来进入Markdown文档的编写非常容易,而且入门门槛非常的低 存在的问题: 习惯了使用Markdo ...

  5. AntDesign getFieldDecorator 获取自定义组件的值

    AntDesign getFieldDecorator 获取自定义组件的值 1.自定义或第三方的表单控件,也可以与 Form 组件一起使用.只要该组件遵循以下的约定: (1)提供受控属性 value ...

  6. 基于Jenkins的持续交付全流程设计与实践

    1 从理论开始 什么是DevOps? 近年来,随着DevOps理念的逐渐深入人心,企业逐渐意识到从看似重复的手工劳动中实现自动化流程处理,对于提高企业劳动生产力已经非常重要,尤其是面向互联网的开发者, ...

  7. 使用redis的zset实现高效分页查询（附完整代码）

    一.需求 移动端系统里有用户和文章,文章可设置权限对部分用户开放.现要实现的功能是,用户浏览自己能看的最新文章,并可以上滑分页查看. 二.数据库表设计 涉及到的数据库表有:用户表TbUser.文章表T ...

  8. 书写markdown的利器

      最近在用markdown记录一些东西,发现vscode本身对markdown的支持有点单薄,像一些数学公式是没办法及时预览的,而且也没有把markdown文件转换为html和pdf的功能,于是我从 ...

  9. “Your build settings specify a provisioning profile with the UUID “”, however, no such provisioning profile was found”

    解决方法: 终端命令行输入下面语句,删除所有的Profilescd ~/Library/MobileDevice/Provisioning\ Profiles/rm *.mobileprovision

  10. CCPC-wannafly Camp Day2 讲课内容总结（杜瑜皓-数据结构）

    ·栈.单调栈 1.栈的特点与基本操作 2.单调栈 单调栈是一种特殊的栈,其栈内的元素都保持一个单调性(单调递增或者递减). ·单调递增栈,从栈底到栈顶依次递增(单调非递减栈:允许有相等) ·单调递减栈 ...