元素局中大集合

原创已于 2022-04-28 08:51:09 修改 · 289 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html

于 2022-04-28 08:30:47 首次发布

大前端学习笔记专栏收录该内容

70 篇文章

订阅专栏

本文详细总结了网页设计中常见的元素居中方法，包括文本水平和垂直居中、图片水平和垂直居中，以及块级元素的各种居中策略。通过CSS属性如text-align、line-height、display和transform等，介绍了多种实用的居中技巧，涵盖了不同场景和未知尺寸的元素居中解决方案。

元素居中大集合

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

一、文本居中

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" /></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、定位居中方法

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>

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、弹性盒居中方法

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

<style>

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

</style>

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

<style>

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

.inner{ align-self:center }

</style>

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

<style>

.box{display:flex; }

.inner{margin:auto}

</style>

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>

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>