[css]垂直居中

最新推荐文章于 2025-04-18 20:43:03 发布

柿子大人

最新推荐文章于 2025-04-18 20:43:03 发布

阅读量100

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_39418249/article/details/113972971

版权

css 专栏收录该内容

1 篇文章

订阅专栏

垂直居中的几种方式

//方式一 transform
element.style {
	 position: absolute;
	 left: 50%;
	 top: 50%;
	 background: yellow;
	 z-index: 1;
	 transform: translate3d(-50%,-50%,0);
}
//方式二 table
.box1{
	 text-align: center;
	 width: 100%;
	 display: table;
	 background: blue;
}
.box1> span {
	display: table-cell;
	vertical-align: middle;
}
//方式三  flex
div.parent{
  display:flex;
}
div.child{
  margin:auto;
}
//2
.box1{
	display: flex;
	justify-content: center;
	align-items: center;
}