css垂直居中

最新推荐文章于 2024-01-04 11:37:09 发布

weixin_30664539

最新推荐文章于 2024-01-04 11:37:09 发布

阅读量109

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhoubingyan/p/8482978.html

.parent{

　　position: relative;

}

.child{

position: absolute;
top:50%;
transform: translateY(-50%);

}

1、定位 盒子宽高已知， position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;
2、table-cell布局 父级 display: table-cell; vertical-align: middle;  子级 margin: 0 auto;
3、定位 + transform ; 适用于 子盒子 宽高不定时； （这里是本人常用方法）
position: relative / absolute;
/*top和left偏移各为50%*/
   top: 50%;
   left: 50%;
/*translate(-50%,-50%) 偏移自身的宽和高的-50%*/
transform: translate(-50%, -50%); 注意这里启动了3D硬件加速哦 会增加耗电量的 （至于何是3D加速 请看浏览器进程与线程篇）
4、flex 布局
父级： 
    /*flex 布局*/
    display: flex;
    /*实现垂直居中*/
    align-items: center;
    /*实现水平居中*/
    justify-content: center;
再加一种水平方向上居中 ：margin-left : 50% ; transform: translateX(-50%);

转载于:https://www.cnblogs.com/zhoubingyan/p/8482978.html