在工作过程中一直碰到关于css布局的问题,其实除了margin:0 auto之外,还有一些很灵活的方法
水平居中
1)使用inline-block+text-align,先将子框由块级元素改变为行内块元素,再通过设置行内块元素居中以达到水平居中。对子框设置display:inline-block,对父框设置text-align:center。
<div class="parent">
<div class="child>DEMO</div>
</div>
.child{
display:inline-block;
}
.parent{
text-align:center;
}
2)使用absolute+transform 将子框设置为绝对定位,移动子框,使子框左侧距离相对框左侧边框的距离为相对框宽度的一半,再通过向左移动子框的一半宽度以达到水平居中。当然,在此之前,我们需要设置父框为相对定位,使父框成为子框的相对框。对父框设置position:relative,对子框设置position:absolute,left:50%,transform:translateX(-50%)
<div class="parent">
<div class="child>DEMO</div>
</div>
.parent {
position:relative;
}
.child {
position:absolute;
left:50%;
transform:translateX(-50%);
}
3)使用flex+justify-content 通过CSS3中的布局利器flex中的justify-content属性来达到水平居中。先将父框设置为display:flex,再设置justify-content:center。
<div class="parent">
<div class="child>DEMO</div>
</div>
.parent { display:flex; justify-content:center;}
垂直居中
1)使用absolute+transform 类似于水平居中时的absolute+transform原理。将子框设置为绝对定位,移动子框,使子框上边距离相对框上边边框的距离为相对框高度的一半,再通过向上移动子框的一半高度以达到垂直居中。当然,在此之前,我们需要设置父框为相对定位,使父框成为子框的相对框。先将父框设置为position:relative,再设置子框position:absolute,top:50%,transform:translateY(-50%)。
<div class="parent">
<div class="child>DEMO</div>
</div>
.parent {
position:relative;
}
.child {
position:absolute;
top:50%;
transform:translateY(-50%);
}
2)使用flex+align-items 通过设置CSS3中的布局利器flex中的属性align-times,使子框垂直居中。先将父框设置为display:flex,再设置align-items:center
<div class="parent">
<div class="child>DEMO</div>
</div>
.parent {
position:flex;
align-items:center;
}
水平垂直居中
1)使用absolute+transform 将水平居中时的absolute+transform和垂直居中时的absolute+transform相结合
<div class="parent">
<div class="child>DEMO</div>
</div>
.parent {
position:relative;
}
.child {
position:absolute;
left:50%;
top:50%;
transform:tranplate(-50%,-50%);
}
2)使用flex+justify-content+align-items 通过设置CSS3布局利器flex中的justify-content和align-items,从而达到水平垂直居中
<div class="parent">
<div class="child>DEMO</div>
</div>
.parent {
display:flex;
justify-content:center;
align-items:center;
}