-
Notifications
You must be signed in to change notification settings - Fork 5
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
如何实现盒子水平垂直居中 #8
Comments
阿里巴巴淘系技术出品之网页布局 |
//第一种
#box1 {
width: 200px;
height: 200px;
background-color: #ccc;
position: absolute;
left: 50%;
right: 50%
transform: translateX(-50%) translateY(-50%);
}
//第二种
#box1 {
width: 200px;
height: 200px;
background-color: #ccc;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
//第三种flex:父元素设置
display:flex;
justify-content:center;
align-items:center;
//第四种grid。给父元素设置
dispaly: grid;
justify-items: center;
align-items: center;
//也可以将justify-items和align-items合并为place-items:center |
第一种不能实现效果,我猜博主应该粘贴漏了 |
没有粘贴漏,这个需要父元素是相对定位,你可能没有添加 |
实现盒子水平垂直居中的方法有哪些
The text was updated successfully, but these errors were encountered: