本文共 5717 字，大约阅读时间需要 19 分钟。
1.块级元素水平居中
方法解读：
- 块级元素水平居中是指块级元素相对于自己的包含块水平居中，方法为对块级元素设置margin:0 auto;
- 如果块级元素变成float或者absolute的话，那么这个方法失效。
- 代码写为margin:auto;在这种场景下等价于margin:0 auto;
div#wrap{ width:300px; height: 300px; background-color: pink; } div#test{ width:100px; height: 100px; background-color: deeppink; margin: 0 auto; } 2.行内元素的水平居中
直接用text-align属性的center值即可搞定，text-align属性的含义就是块级元素中的行内内容的对齐方式。
3.块级元素的垂直水平居中
三种方法，都是基于绝对定位的
（1）方法1：已知宽度和高度 + left:50% + top:50% + margin-left:自身border-box宽度一半的负值 + margin-top:自身border-box高度一半的负值
（2）方法2：left:50% + top:50% + transform(-50%,-50%,0)
（3）【推荐】方法3： 已知宽度和高度 + left:0 + right:0 +top:0 + bottom:0 + margin:auto
- 方法1 ：需已知尺寸
#wrap{ position: relative; width:400px; height: 300px; background-color: pink; } #test{ position: absolute; left:50%;/*包含块宽度的百分比*/ top:50%;/*包含块高度的百分比*/ margin-left:-50px;/*元素自身宽度的一半*/ margin-top:-50px;/*元素自身高度的一半*/ width:100px; height: 100px; background-color: deeppink; } - 方法2 ：无需尺寸，适合尺寸不固定的场景，比如多行文本
这是一段文本啊啊啊 这是一段文本啊啊啊 这是一段文本啊啊啊 这是一段文本啊啊啊 这是一段文本啊啊啊 这是一段文本啊啊啊
#wrap{ position: relative; width:400px; height: 300px; background-color: pink; } #test{ position: absolute; left:50%;/*包含块宽度的百分比*/ top:50%;/*包含块高度的百分比*/ transform: translate3d(-50%,-50%,0);/*宽度和高度不固定*/ background-color: deeppink; } - 方法3：需已知尺寸
原理是如下公式：
left+margin+border+padding+width+right = 占据包含块（元素padding box）的宽度
top+margin+border+padding+height+bottom = 占据包含块（元素padding box）的高度
#wrap{ position: relative; width:400px; height: 300px; background-color: pink; } #test{ position: absolute; left:0; right: 0; top:0; bottom: 0; margin:auto; width:100px; height: 100px; background-color: deeppink; } 4.图片垂直水平居中（inline-block元素垂直水平居中）
方法解读：由于图片是inline-block元素，所以水平居中使用text-align:center;即可，关键是垂直居中，但是肯定会涉及到vertical-align:middle。方法是利用vertical-align:middle。
代码
- 图片设置为vertical-align:middle;
#wrap{ width:300px; height: 300px; border:1px solid; margin:0 auto; text-align: center; } #wrap img{ vertical-align: middle; } - 给图片的包含块元素添加一个:after伪元素，伪元素的特点有5个，也就是5条规则
#wrap:after{ content:""; height: 100%;/*相对于#wrap*/ width:0; background-color:pink; display: inline-block;/*与图片成为兄弟行内元素*/ vertical-align: middle; } 5.单行文本垂直居中
一般指的是一个块级元素比如<div>或者<p>等元素的内容为一个单行文本，方法为让块级元素的line-height与height相等，更优雅的方式是只给块级元素设置line-height而不设置height，这样也能实现效果，因为height此时会被其中的内容默认撑开。
下面的效果是单行文本垂直居中+水平居中
这是一段单行文本
div#wrap{ line-height: 60px;/*也可以加上height:60px;*/ background-color: pink; width: 200px; text-align: center;/*块级元素中的行内内容的水平对齐方式*/ } 6.多行文本垂直居中
其实这个问题需要看承装多行文本的元素的display：
- （1）如果是block元素，那么就用块级元素的垂直水平居中的第二种方法，也就是尺寸不固定时的块级元素的垂直水平居中。
- （2）如果是inline-block元素，那么就参考图片的垂直水平居中方法
- （3）如果是inline元素，那么就将其转化为inline-block或者block咯
- （4）建议把block元素转化为inline-block元素，然后用（2），也就是无论是什么类型的元素，都建议用（2）
（1）如果是block元素
这是一段文本
这是一段文本 这是一段文本 这是一段文本 这是一段文本
div#wrap{ position: relative; width:300px; height: 300px; background-color: pink; } p#test{ position: absolute; left:50%; top:50%; transform: translate3d(-50%,-50%,0); background-color: deeppink; } （3）如果是inline元素
这是一段文本 这是一段文本 这是一段文本 这是一段文本 这是一段文本
div#wrap{ width:300px; height: 300px; background-color: pink; } span#test{ display: inline-block; background-color: deeppink; vertical-align: middle; } div#wrap:after{ content: ""; display: inline-block; height: 100%; width:0; vertical-align: middle; } div#wrap{ text-align: center;/*让整个span在#wrap中水平居中*/ } （4）把block元素转化为inline-block
这是一段文本
这是一段文本 这是一段文本 这是一段文本 这是一段文本
div#wrap{ width:300px; height: 300px; background-color: pink; } p#test{ display: inline-block; background-color: deeppink; vertical-align: middle; } div#wrap:after{ content: ""; display: inline-block; height: 100%; width:0; vertical-align: middle; } div#wrap{ text-align: center; }
7.总结
上述不同场景的垂直水平居中其实会有重合的地方，但是每个场景总会有最适合自己的方案，一般来说，能不提升层级就不提升层级，也就是尽量少使用float和position:absolute。如果是在面试中，那么不同的场景的考察点是不同的，比如图片垂直水平居中的考察点是vertical-align的应用，单行文本垂直居中的考察点是line-height的应用，多行文本垂直居中最好的方案也是转化为inline-block从而利用和图片一样的方案，而块级元素垂直水平居中就是绝对定位和margin的应用。水平居中就比较简单了，块级元素的水平居中使用margin:0 auto;而行内元素（inline、inline-block）的水平居中就是其父级块元素的text-align:center;。此外还要掌握不同的盒模型的特点：浮动盒模型、绝对定位盒模型和普通盒模型，它们的包含块分别是什么，以及它们的层级，是否具有包裹性等等特点。
转载地址：https://blog.csdn.net/qq_21428081/article/details/92094115 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！
发表评论
最新留言
关于作者
