css经典布局系列一——垂直居中布局

栏目: CSS · 发布时间: 5年前

  • 设置两个盒子,关系是父子:父元素
<body>
    <div class="parent">
    	<div class="child">
    	    child
    	</div>
    </div>
</body>
复制代码

方法一:同宽高+padding

  • 将父元素的width和height设置的和子元素的大小一样,然后设置父元素parent的padding。此时padding会将子元素挤进父元素的中间位置;
  • 此时父、子元素的定位是否开启都可以;
*{
    margin: 0;
    padding: 0;
}
.parent{
    width: 100px;
    height: 100px;
    /*将padding设置,来挤出来居中的样子;但是要注意的是,此时的width和height要和子元素的大小一样,否则还是不居中*/
    padding: 100px;
    border: 1px solid;
    margin: 100px auto;
}
.child{
    width: 100px;
    height: 100px;
    background: pink;
    line-height: 100px;
    text-align: center;
}	
复制代码

方法二:absolute + margin:auto

  • 父元素相对定位,子元素绝对定位;
  • 绝对定位盒子模型有个特点:left+right+width+padding+margin=包含块的宽度;所以此时可以将left、right(默认值为auto,所以需要重设置)设置为0,而padding已经确定(未设置时默认值为0px),所以剩下的都是margin,但是margin的默认值是0px。所以就将magin设为auto,使得元素自动居中了;
  • 即:left、right、top、bottom为0;margin为auto;
css经典布局系列一——垂直居中布局
*{margin: 0;padding: 0;}
.parent{
    position: relative;
    width: 200px;
    height: 200px;
    /*padding: 100px;*/
    border: 1px solid;
    margin: 100px auto;
}
.child{
    position: absolute;
    /*left+right+width+padding+margin=包含块的宽度*/
     /*0 0 100 0 auto =300*/
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    background: pink;
    line-height: 100px;
    text-align: center;
}
复制代码

方法三:absolute + 负margin(或transform)

  • 父相对子绝对,上下为50%,margin设为负
  • 强大的absolute对于这种小问题当然也是很简单的;
  • 绝对定位脱离文档流,不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素则父元素也会失去高度。
  • 父元素相对定位,子元素绝对定位;
  • 将子元素left和right直接设为50%,相对的是父元素;
  • 然后再使用margin-left和margin-top设为子元素的一半的负数。就是将偏离父元素中心的那段拽回来;
.parent{
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid;
}
.child{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
    width: 100px;
    height: 100px;
    background: pink;
    line-height: 100px;
    text-align: center;
}
复制代码
  • 如果不知道子元素的宽和高,则使用transfrom:translate3d(-50% -50% );
    • transform 为 CSS3 属性,有兼容性问题;
transfrom:translate3d(-50% -50% );
/* width: 100px;
height: 100px; */
复制代码
  • 但是这种方法,当在需要做3d变换的元素上不能使用,前后会有所影响;

方法四:inline-block+table-cell

  • 兼容性好
<style>
  .parent {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  .child {
    display: inline-block;
  }
</style>
复制代码

方法五:flex布局

  • 只需设置父节点属性,无需设置子元素
  • 兼容性问题
// 父元素设置
display: flex;
justify-content:center;
align-items:Center;
复制代码

以上所述就是小编给大家介绍的《css经典布局系列一——垂直居中布局》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

ARM嵌入式系统开发

ARM嵌入式系统开发

斯洛斯 / 北京航大 / 2005-5 / 75.00元

《ARM嵌入式系统开发:软件设计与优化》从软件设计的角度,全面、系统地介绍了ARM处理器的基本体系结构和软件设计与优化方法。内容包括:ARM处理器基础;ARM/Thumb指令集;C语言与汇编语言程序的设计与优化;基本运算、操作的优化;基于ARM的DSP;异常与中断处理;固件与嵌入式OS;cache与存储器管理;ARMv6体系结构的特点等。全书内容完整,针对各种不同的ARM内核系统结构都有详尽论述,......一起来看看 《ARM嵌入式系统开发》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

URL 编码/解码
URL 编码/解码

URL 编码/解码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具