河北华宇建设集团有限公司网站,重庆网站建设制作设计公司,全国大学生创业网登录入口,陕西建设银行网站让内容垂直居中#xff0c;是一个很重要的应用情景#xff0c;在很多场合都会需要。这也是面试的时候#xff0c;一些考官喜欢拿来初面的小题目。
这里#xff0c;小结下让内容垂直居中的三种方式。
当然#xff0c;读者如果有更好的方法#xff0c;也可以提出来。 基本…让内容垂直居中是一个很重要的应用情景在很多场合都会需要。这也是面试的时候一些考官喜欢拿来初面的小题目。
这里小结下让内容垂直居中的三种方式。
当然读者如果有更好的方法也可以提出来。 基本HTML
div classbigdiv classsmall/div
/div
基本CSS
.big{width: 600px;height: 400px;background: #eee;
}
.small{width: 200px;height: 150px;background: #f00;
}
一、使用flex
.big{display: flex;justify-content: center;align-items: center;
}
二、使用grid
.big{display: grid;place-items:center;
}
.big{display: grid;
}
.small{place-self: center;
}
三、使用position
.big{position: relative;
}
.small{position: absolute;left:50%;top:50%;transform: translate(-50%,-50%);
}
