技术文章 | jswz

前端面试题之css考试题目居中的N种办法

水平、垂直居中,是CSS中经常用到的,也是面试必考题,居中有很多种方式,今天一篇文章,彻底说全、说透!

 
比如,要实现以下效果:
 
 
方法一:absolute + 负margin  (此方法好理解,兼容性OK,缺点是需要知道子元素的宽高)
<!--html代码-->
<div class="dbig">
    <div class="box size">aaaaaa</div>
</div>
 
/*css代码*/
.dbig{
    border: 1px solid red;
    width: 300px;
    height: 300px;
    position: relative;
}
.box {
    background: green;    
}
.box.size{
    width: 100px;
    height: 100px;
    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}
 

方法二:absolute + margin auto(此方法兼容性也很好,缺点是需要知道子元素的宽高)
 
<!--html代码-->
<div class="dbig">
    <div class="box size">aaaaaa</div>
</div>
 
/*css代码*/
.dbig{
    position: relative;
}
.box {
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}


方法三:absolute + calc(此方法兼容性依赖calc的兼容性,缺点是需要知道子元素的宽高)
 
<!--html代码-->
<div class="dbig">
    <div class="box size">aaaaaa</div>
</div>
 
 
/*css代码*/
.dbig{
    position: relative;
}
.box {
    position: absolute;;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}
 

方法四:absolute + transform(这种方法兼容性依赖translate2d的兼容性)
 
<!--html代码-->
<div class="dbig">
    <div class="box size">aaaaaa</div>
</div>
 
 
/*css代码*/
.dbig{
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
 

方法五:lineheight(此方法需要在子元素中将文字显示重置为想要的效果)
 
<!--html代码-->
<div class="dbig">
    <div class="box size">aaaaaa</div>
</div>
 
 
/*css代码*/
.dbig{
    line-height: 300px;
    text-align: center;
    font-size: 0px;
}
.box {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
    text-align: left; /* 修正文字 */
}
 

方法六:css-table(css新增的table属性,可以让把普通元素变为table元素的现实效果,通过这个特性也可以实现水平垂直居中,这种方法和table一样的原理,但却没有那么多冗余代码,兼容性也还不错)
 
<!--html代码-->
<div class="dbig">
    <div class="box size">aaaaaa</div>
</div>
 
/*css代码*/
.dbig{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box {
    display: inline-block;
}
 

方法七:flex(目前在移动端已经完全可以使用flex了,PC端需要看自己业务的兼容性情况)
 
<!--html代码-->
<div class="dbig">
    <div class="box size">aaaaaa</div>
</div>
 
 
/*css代码*/
.dbig{
    display: flex;
    justify-content: center;
    align-items: center;
}
 
总结1:
1、PC端有兼容性要求,宽高固定,推荐absolute + 负margin
2、PC端有兼容要求,宽高不固定,推荐css-table
3、PC端无兼容性要求,推荐flex
4、移动端推荐使用flex
 
 
总结2:兼容性

 
方法 居中元素定宽高固定 PC兼容性 移动端兼容性
absolute + 负margin ie6+, chrome4+, firefox2+ 安卓2.3+, iOS6+
absolute + margin auto ie6+, chrome4+, firefox2+ 安卓2.3+, iOS6+
absolute + calc ie9+, chrome19+, firefox4+ 安卓4.4+, iOS6+
absolute + transform ie9+, chrome4+, firefox3.5+ 安卓3+, iOS6+
lineheight ie6+, chrome4+, firefox2+ 安卓2.3+, iOS6+
css-table ie8+, chrome4+, firefox2+ 安卓2.3+, iOS6+
flex ie10+, chrome4+, firefox2+ 安卓2.3+, iOS6+
 
 
 
  
 
爱创课堂是一家专门做前端培训的机构,由百度高级工程师,《JavaScript设计模式》作者张容铭老师亲自授课,全程20个项目实战。

我们前端课程的五大优势:

1. 名师亲自授课,课程无缝隙对接企业
2. 免费学习一周
3. 签订就业协议,目前学员平均就业薪资12K
4. 采取小班教学模式(一个班20—30人)
5. 与中国石油,中国电信,软通等知名企业合作,进行企业内训,并进行学员就业推荐
 

学习热门技术,让自己更值钱

仅仅花费5个月的时间

从小白蜕变成老司机

这5个月的认真学习,刻苦训练

将会收获你意想不到的硕果

 

关注微信公众号「爱创课堂网络科技」

获取前端相关技术干货、资讯、高薪职位等

前端疑难解答、学习咨询、视频资源

 请扫码添加微信:haomei0452 


访问 www.icketang.com 获取更多信息。