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;

*{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经典布局系列一——垂直居中布局》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

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

码农书籍

Domain-Driven Design Distilled

Vaughn Vernon / Addison-Wesley Professional / 2016-6-2 / USD 36.99

Domain-Driven Design (DDD) software modeling delivers powerful results in practice, not just in theory, which is why developers worldwide are rapidly moving to adopt it. Now, for the first time, there......一起来看看《Domain-Driven Design Distilled》这本书的介绍吧!

码农工具