1.margin:0 auto；（水平居中）

适用于（块级元素）

wrapper（wrapper只负责版心的效果）定义一个固定的宽度；margin（外边距）左右的值设置为auto。

让带有wrapper的标签，都能居中布局

margin:0 auto对于已经定位的元素无效，已定位元素需要用left和top定位

如果需要让div，p，h（大盒子）水平居中？

margin:0 auto;直接给元素本身设置。

 <div class="box wrapper"><img src="./tutu.jpg" alt=""></div>

这里是让带有wrapper和它的子元素一起居中，并没有让img在box中居中。

 .wrapper {width: 1226px;margin: 0 auto;}.box {width: 400px;height: 400px;background-color: rgb(117, 51, 216);}

margin+width

2.margin: auto;（垂直水平居中）

适用于已知宽高

box添加绝对定位；设置上下左右为0；margin: auto;即可实现垂直水平都居中。

 <div class="box"><img src="./tutu.jpg" alt=""></div>

 .box {width: 400px;height: 400px;background-color: rgb(117, 51, 216);position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}

绝对定位+上下左右+margin

也可用于图片（垂直水平居中），只需要把定位改一下即可

 .box {width: 400px;height: 400px;background-color: rgb(117, 51, 216);position: relative;}img {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}

3. 定位居中（垂直水平居中）

适用于未知宽高，已知高度也可以用

子绝父相
父元素 position: relative;（相对定位）；自身元素position: absolute;（绝对定位）

top: 50%;使自身元素距离上方“父元素的50%高度”的高度；left: 50%;使自身元素距离左方“父元素的50%宽度”的宽度。

transform: translate(-50%,-50%);自身元素再往左，往上平移自身元素的50%宽度和高度。

 .box {width: 400px;height: 400px;background-color: rgb(117, 51, 216);position: relative;}img {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

定位+变形

4.text-align水平居中

主要使用：文字居中

设置给父元素，让父元素里面的文字居中。
父元素为块元素，子元素为行内/行内块元素（p块元素也可以），让子元素居中显示。
也可以将父元素（行内元素）转换为块级元素，同样可以居中显示。
设置浮动，定位后，父元素加text-aglin居中，子元素不能生效。

 .box {width: 600px;height: 400px;background-color: rgb(117, 51, 216);text-align: center;}

text-align:center能让哪些元素水平居中？

（给父元素设置）文本；行内元素：span，a等；行内块元素：input，img等。

5.行高line-height垂直居中

适用于：文本

通过控制一行的上下间距，让单行文本垂直居中

line-height:文字父元素高度

.box {height: 400px;}p {line-height: 400px;}

（扩展）只要文字本身高度：

网页精准布局（取消上下间距）line-height:1

6.Flex居中(垂直水平居中)

 .box {/* flex布局 */display: flex;/* 子元素水平居中 */justify-content: center;/* 子元素垂直居中 */align-items: center;}

但是浏览器兼容性较差，常用于移动端。

7.width:fit-content; (水平居中)

设置width:fit-content;同时设置margin：auto；实现元素居中；

图片属于可替换元素，具有行内块特点，但是这里使用此方法居中不行，需要将图片转换成块元素，原因不清楚（值得深入探讨）。图片需要添加显示转换。

文字等其他元素可以实现居中。

  img {/* img为可替换元素，具有行内块特点 */display: block;width: fit-content;margin: 0 auto;}

缺点：

向内自适应:元素width设置了宽度，同时设置了fit-content；此时，会冲突。

（扩展）fit-content属性可以把内容包裹起来

内容长度>规定宽度（box）时，会自动换行，不超过规定宽度；

内容长度<规定宽度时，按照规定宽度设置长度。

写了多少文字，显示多长

 .box {width: 600px;height: 400px;background-color: rgb(117, 51, 216);}p {width: fit-content;background-color: pink;}

8.margin-top（垂直水平居中）

元素设置宽高；margin为元素: -(宽高一半);

margin-top: -100px;元素往上移到自身高度的一半。其余同理。

 .box {position: relative;}img {width: 200px;height: 200px;position: absolute;top: 50%;left: 50%;margin-top: -100px;margin-left: -100px;}

缺点：

需要设置元素宽高。

9.vertical-align:middle（垂直居中）

行内，行内块，浏览器都当文字处理，如果是大的字和小的字，都默认基线对齐

行内元素的基线相对于该元素所在行的基线的垂直对齐。

如果行内块和行内文字无法通过vertical-align或行高对齐，可通过定位

<div class="box"><span>你好</span><img src="./tutu.jpg" alt=""></div>

 img {vertical-align: middle;}

CSS常见图片居中，文字居中，版心居中集合相关推荐

[css] 怎么让div中的图片和文字同时上下居中？
[css] 怎么让div中的图片和文字同时上下居中? <div><img src="./"/><label>文字内容</label> ...
CSS实战样式：文字两侧加居中横线
CSS实战样式:文字两侧加居中横线原文: https://www.freesion.com/article/4444809147/ 在日常的开发中,会遇到这样的需求,比如移动web开发中的登录页的底 ...
图文混排时，图片和文字垂直如何居中
图文混排时,图片和文字垂直如何居中首先我们来说一说line-height和vertical:middle的区别 line-height:行高,可以使标签内部一行的内容进行垂直对齐 vertical: ...
css背景图片全屏显示加居中显示
css背景图片全屏显示加居中显示,屏幕过大平铺屏幕过小居中裁剪 div { background:url(/i/bg_flower.gif); background-size:cover; -moz ...
html文字图片同一行,CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见欢思 ...
html如何让图片跟字体重叠,CSS设置图片与文字的间距
[实例介绍] CSS设置图片与文字的间距希望图片本身与文字有一定的距离只需要给标记添加margin属性即可.margin属性包括margin．top.margin-right,margin-bott ...
html图片后边自动底部对齐,css实现图片与文字底边对齐
css实现图片与文字底边对齐通常图片与文字放在一起的时候图片往往会偏上,通过设置margin-bottom可以达到文字图片底边对齐的目的我们在做网页的时候, 会遇到一个图片和文字位置对不齐的问题. ...
CSS动画图片或者文字上下来回循环上下移动
CSS动画图片或者文字上下来回循环上下移动 @keyframes dong { 0% { transform: translate(0px, 0px); } 50% { transform: tra ...
html文字于图片齐平,CSS控制图片和文字在同一行对齐显示
图片与文字是做网站必不可少的要素,我们在使用图片与文字布局时,如何让图片和文字在同一行对齐显示来制作出一个整齐的网页出来. 对于一些学做网站新手来说,图片和文字在同一行对齐显示却不是一件容易的事情,这 ...
css图片和文字一样高,css里图片和文字如何等高
CSS 让同一行的图片和文字对齐大家在做前端开发的时候那,经常会遇到img标签和文字在同一行. 那么我刚开始的时候那是利用的float浮动布局解决的,定位布局(兼容性需要调整不划算)下面给大家介绍 ...

CSS常见图片居中，文字居中，版心居中集合