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

最新推荐文章于 2023-12-27 07:00:52 发布

weixin_34388207

最新推荐文章于 2023-12-27 07:00:52 发布

阅读量147

点赞数

原文链接：https://juejin.im/post/5cbb06936fb9a068973edab7

版权

元素水平垂直居中

设置两个盒子，关系是父子：父元素

<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;
复制代码

文字元素的垂直水平居中

设置行高和text-align：

line-height: 50px;
text-align:center;
复制代码

flex布局

display: flex;
justify-content:center;
align-items:Center;
复制代码

单方面的水平居中或者垂直居中布局，都可以按照上面的方法来实现

weixin_34388207

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css经典布局系列一——垂直居中布局

元素水平垂直居中设置两个盒子，关系是父子：父元素<body> <div class="parent"> <div class="child"> child </div> </div></body>复制代码方法一：同宽高+padding将父元素的width和h...
复制链接

扫一扫