元素居中大合集

关于居中这个话题一直是面试官最喜欢问的问题，今天呢我就给大家总结一下关于文本、图片与盒子的一系列居中问题。
一、文本居中
1、文本水平居中
给装文本的盒子添加text-align:center;

<div>文本</div>
​
<style>
​
div{text-align:center;}
​
</style>
1
2
3
4
5
6
7

以上方法适用于所有内联元素的水平居中
2、单行文本垂直居中
给装文本的盒子设置行高等于高度

<div>文本</div>
​
<style>
​
div{height:60px; line-height:60px;}
​
</style>
1
2
3
4
5
6
7

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

<div>文本</div>
​
<style>
​
div{height:300px; display:table-cell; vertical-align:middle}
​
</style>
1
2
3
4
5
6
7

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

<div><img src="1.jpg" /></div>
​
<style>
​
div{text-align:center}
​
</style>
1
2
3
4
5
6
7

2、图片垂直居中
实现图片垂直居中我总结了两个方法：
1）利用行高等于高度的原理

<div><img src="1.jpg" /></div>
​
<style>
​
div{height:200px; line-height:200px; }
​
img{vertical-align:middle}
​
</style>
1
2
3
4
5
6
7
8
9

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>
1
2
3
4
5
6
7
8
9
10
11

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

<div><img src="1.jpg" /></div>
​
<style>
​
div{height:200px; }
​
img{vertical-align:middle; display:inline-block}
​
div::after{content:"";vertical-align:middle;width:0; height:100%; display:inline-block}
​
</style>
1
2
3
4
5
6
7
8
9
10
11

三、块级元素居中
1、定位居中方法
1) 知道子盒子尺寸的情况下可以使用

<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%;margin-top:-50px;left:50%;margin-left:-50px;}
/* margin-top的取值是负的子盒子的高度的一半，margin-left的取值是负的子盒子的宽度的一半*/
​
</style>
1
2
3
4
5
6
7
8
9
10
11
12

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>
1
2
3
4
5
6
7
8
9
10
11
12

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>
1
2
3
4
5
6
7
8
9
10
11

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>
1
2
3
4
5
6
7
8
9
10
11
12

2、弹性盒居中方法
1)

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

<style>

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

</style>
1
2
3
4
5
6
7
8
9

2)

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

<style>

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

.inner{ align-self:center }

</style>
1
2
3
4
5
6
7
8
9
10
11

3)

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

<style>

.box{display:flex; }

.inner{margin:auto}

</style>
1
2
3
4
5
6
7
8
9
10
11

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

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

<style>

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

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

</style>
1
2
3
4
5
6
7
8
9
10
11

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>
1
2
3
4
5
6
7
8
9
10
11
12
13

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>
1
2
3
4
5
6
7
8
9
10
11