- 设置两个盒子，关系是父子：父元素
<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经典布局系列一——垂直居中布局》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
JS 压缩/解压工具
在线压缩/解压 JS 代码
JSON 在线解析
在线 JSON 格式化工具