欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

三行css代码实现垂直居中_html/css_WEB-ITnose

程序员文章站 2024-01-14 14:07:58
...
html结构为:

css代码为:

#div2{	height:300px;width:300px;	border:1px red solid;	text-align:center;	margin:auto;}#div1{      height:50px;width:50px;      position: relative;      top: 50%;      transform: translateY(-50%);      border:1px red solid;      margin:auto;}

其中最核心的css是这三行

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

为了浏览器兼容性,需要在transform属性前添加浏览器前缀