垂直居中的常用的css样式

一颗柳树

于 2023-02-18 22:53:08 发布

阅读量155

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_46325368/article/details/129104523

版权

1、常用flex布局

dispaly:flex;
justify-content: center; /* 垂直方向居中 */
align-items: center; /* 水平方向居中 */

2、绝对定位

.parent{
position:relative
}
.child{
	position: absolute;
	 top: 50%;
     left: 50%;
      margin-left: -自身盒子一半;
      margin-top: -自身盒子一半;
}
// 知道child高度
.child{
	position: absolute;
 	top: 50%;
    left: 50%;
    margin-left: -自身盒子一半;
    margin-top: -自身盒子一半;
}
// 不知道child高度
.child{
	position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.child{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }