亮闪闪的效果图
如何垂直居中一个属性为item的div元素?
<div class="box">
<div class="item"></div>
</div>
1、方法一
已知子元素宽高,父元素随意;
设置父元素:定位为relative;
设置子元素:
定位为absolute,
left为50%,top为50%,
margin-left为负的子元素宽度的一半,
margin-top为负的子元素高度的一半;
.box {
position: relative;
width: 500px;
height: 500px;
background-color: yellow;
}
.item {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
background-color: blue;
margin-left: -50px;
margin-top: -50px;
}
2、方法二
已知父元素宽高及子元素宽高;
设置父元素:
定位为relative,
margin为auto;
设置子元素:
定位为absolute,
margin-left为(父元素宽 - 子元素宽)/ 2,
margin-top为(父元素高 - 子元素高)/ 2;
.box {
position: relative;
width: 500px;
height: 500px;
background-color: yellow;
margin: auto;
}
.item {
position: absolute;
margin-left: 200px;
margin-top: 200px;
width: 100px;
height: 100px;
background-color: blue;
}
3、方法三
设置父元素:
display为table-cell,
垂直对齐方式vertical-align: middle,
文本水平对齐方式text-align: center;
设置子元素:为块级元素均匀分布display: inline-block;
.box {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 500px;
height: 500px;
background-color: yellow;
}
.item {
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
}
4、方法四
设置父元素:
display为flex,
水平居中justify-content: center,
垂直居中align-items:center;
.box {
display: flex;
justify-content: center;
align-items:center;
width: 500px;
height: 500px;
background-color: yellow;
}
.item {
width: 100px;
height: 100px;
background-color: blue;
}