关于居中这个话题一直是面试官最喜欢问的问题，今天呢我就给大家总结一下关于文本、图片与盒子的一系列居中问题。

　　一、文本居中

　　1、文本水平居中

　　给装文本的盒子添加text-align:center;

<div>文本</div>

<style>

div{text-align:center;}

</style>

　　以上方法适用于所有内联元素的水平居中

　　2、单行文本垂直居中

　　给装文本的盒子设置行高等于高度

<div>文本</div>

<style>

div{height:60px; line-height:60px;}

</style>

　　3、多行文本垂直居中

　　想实现多行文本垂直居中需要对元素本身的类型进行转换

<div>文本</div>

<style>

div{height:300px; display:table-cell; vertical-align:middle}

</style>

　　二、图片居中

　　1、图片水平居中

　　因为图片属于内联-块元素，所以text-align:center;在他这里也是适用的

<div><img src="1.jpg" /></div>

<style>

div{text-align:center}

</style>

　　2、图片垂直居中

　　实现图片垂直居中我总结了两个方法：

　　1)利用行高等于高度的原理

<div><img src="1.jpg" /></div>

<style>

div{height:200px; line-height:200px; }

img{vertical-align:middle}

</style>

　　2)利用中线参照物的原理

<div><img src="1.jpg" /><span></span></div>

<style>

div{height:200px; }

img{vertical-align:middle;}

span{vertical-align:middle;width:0; height:100%; display:inline-block}

</style>

　　方法二中，如果前面样式重置的时候你把图片转成块级元素了，那么你还需要再给转回来(display:inline-block),参照物span也可以使用css3里面的伪元素替代：

<div><img src="1.jpg" /><span></span></div>

<style>

div{height:200px; }

img{vertical-align:middle;}

span{vertical-align:middle;width:0; height:100%; display:inline-block}

</style>

　　三、块级元素居中

　　1、定位居中方法

　　1) 知道子盒子尺寸的情况下可以使用

<div><img src="1.jpg" /><span></span></div>

<style>

div{height:200px; }

img{vertical-align:middle;}

span{vertical-align:middle;width:0; height:100%; display:inline-block}

</style>

　　2) 知道子盒子尺寸的情况下利用css3里面的calc函数也可以实现

<div class="box">
    <div class="inner"></div>
</div>

<style>

.box{width:400px; height:400px; background:#ff0;position:relative}
    
.inner{width:100px; height:100px; background:#0f0;position:absolute;top:calc(50% - 50px); left: calc(50% - 50px); }
/* calc(50% - 50px) 里面减掉的是子盒子的宽度（或者高度）的一半*/

</style>

　　3) 不知道子盒子尺寸的情况下可以使用

<div class="box">
    <div class="inner"></div>
</div>

<style>

.box{width:400px; height:400px; background:#ff0;position:relative}
    
.inner{width:100px; height:100px; background:#0f0; position:absolute; top:0; bottom:0; right:0; left:0; margin:auto;}

</style>

　　4) 不知道子盒子尺寸的情况下利用css3里面的位移可以实现

<div class="box">
    <div class="inner"></div>
</div>
<style>
    
.box{width:400px; height:400px; background:#ff0;position:relative}
    
.inner{width:100px; height:100px; background:#0f0;position:absolute;top:50%; left: 50%; transform:translate(-50%,-50%) }

/* translate里面的百分数参照物是元素自身，所以就算你不知道盒子尺寸也可以实现的*/

</style>

　　2、弹性盒居中方法

　　1)

<div class="box">
    <div class="inner"></div>
</div>

<style>

.box{display:flex; justify-content:center; align-items:center}

</style>

　　2)

<div class="box">
    <div class="inner"></div>
</div>

<style>

.box{display:flex; justify-content:center; }

.inner{ align-self:center }

</style>

　　3)

<div class="box">
    <div class="inner"></div>
</div>

<style>

.box{display:flex; justify-content:center; }

.inner{ align-self:center }

</style>

　　3、inline-block居中方法

　　其实inline-block元素的居中等同于图片的居中，如果你需要让一个inline-block居中，那么图片的居中方法都适用。

　　1)行高等于高度居中方法

<div class="box">
    <div class="inner"></div>
</div>

<style>

.box{display:flex; justify-content:center; }

.inner{ align-self:center }

</style>

　　2)参照物中线对齐方法

<div class="box">
    <div class="inner"></div>
</div>

<style>

.box{width:400px; height:400px; background:#ff0; text-align:center; }

.inner{vertical-align:middle; display:inline-block}

.box::after{content:""; vertical-align:middle; display:inline-block; width:0; height:100%}

</style>

　　3)等同多行文本居中方法

<div class="box">
    <div class="inner"></div>
</div>

<style>

.box{width:400px; height:400px; background:#ff0; text-align:center; display:table-cell; vertical-align:middle }

.inner{ display:inline-block}

</style>

　　- End -

　　更多关于“前端培训”的问题，欢迎咨询千锋教育在线名师。千锋教育多年办学，课程大纲紧跟企业需求，更科学更严谨，每年培养泛IT人才近2万人。不论你是零基础还是想提升，都可以找到适合的班型，千锋教育随时欢迎你来试听。