每天都被ui说这个框不居中,这不居中。幸好产品懂代码,知道我尽力了,所以总结下几个居中的办法。
水平居中
- 行内元素: text-align:center
- 块级元素: margin:0 auto
- 绝对定位和移动: absolute + transform
- 绝对定位和负边距: absolute + margin
- flex布局: flex + justify-content:center
垂直居中
- 子元素为单行文本: line-height:height
- absolute + transform
- flex + align-items:center
- table: display:table-cell; vertical-align: middle
- 利用position和top和负margin
:已知元素宽高
div{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
绝对定位+负margin
div{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
flex + justify-content + align-items
.box{
height:600px;
display:flex;
justify-content:center;
align-items:center;
}
.box>div{
background: green;
width: 200px;
height: 200px;
}
大概就是这样了,再也不怕说不居中了。