不用float的多个div的水平居中
<div class="parent">
<div class="child">
1
</div>
<div class="child">
2
</div>
<div class="child">
3
</div>
</div>
.parent {
text-align: center;
font-size: 0;//去除display: inline-flex;产生的间隙
}
.child {
font-size: 1rem;//去除display: inline-flex;产生的间隙
width: 10rem;
height: 10rem;
background-color: pink;
display: inline-flex;
-webkit-text-size-adjust:none;
}
image.png
.parent {
display: flex;
align-items:center;
}
.child {
margin: 0 auto;
width: 10rem;
height: 10rem;
background-color: pink;
}
image.png
div的垂直居中
1.display:flex;
<div class="parent">
<div class="myself">
<div class="child">
1
</div>
<div class="child">
2
</div>
<div class="child">
3
</div>
</div>
</div>
.parent {
height: 50rem;
background-color: yellow;
display: flex;
justify-content: center;
align-items: center;
}
.child {
/*margin: 0 auto;*/
width: 10rem;
height: 10rem;
background-color: pink;
}
image.png
- position:absolute;+transform
.parent {
height: 50rem;
background-color: yellow;
position: relative;
}
.child {
width: 10rem;
height: 10rem;
background-color: pink;
}
.myself{
position: absolute;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left: 50%;
}
image.png
