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

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

适用于（块级元素）

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

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

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

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

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

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

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

1.  
   .wrapper {
2.  
   width: 1226px;
3.  
   margin: 0 auto;
4.  
   }
5.  
    
6.  
   .box {
7.  
   width: 400px;
8.  
   height: 400px;
9.  
   background-color: rgb(117, 51, 216);
10.  
    }

margin width

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

适用于已知宽高

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

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

1.  
   .box {
2.  
   width: 400px;
3.  
   height: 400px;
4.  
   background-color: rgb(117, 51, 216);
5.  
   position: absolute;
6.  
   top: 0;
7.  
   bottom: 0;
8.  
   left: 0;
9.  
   right: 0;
10.  
    margin: auto;
11.  
    }

绝对定位 上下左右 margin

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

1.  
   .box {
2.  
   width: 400px;
3.  
   height: 400px;
4.  
   background-color: rgb(117, 51, 216);
5.  
   position: relative;
6.  
    
7.  
   }
8.  
    
9.  
   img {
10.  
    position: absolute;
11.  
    top: 0;
12.  
    bottom: 0;
13.  
    left: 0;
14.  
    right: 0;
15.  
    margin: auto;
16.  
    }

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

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

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

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

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

1.  
   .box {
2.  
   width: 400px;
3.  
   height: 400px;
4.  
   background-color: rgb(117, 51, 216);
5.  
   position: relative;
6.  
    
7.  
   }
8.  
    
9.  
   img {
10.  
    position: absolute;
11.  
    top: 50%;
12.  
    left: 50%;
13.  
    transform: translate(-50%, -50%);
14.  
    }

定位 变形

4.text-align水平居中

主要使用：文字居中

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

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

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

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

5.行高line-height垂直居中

适用于：文本

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

line-height:文字父元素高度

1.  
   .box {
2.  
   height: 400px;
3.  
   }
4.  
    
5.  
   p {
6.  
   line-height: 400px;
7.  
   }

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

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

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

1.  
   .box {
2.  
   /* flex布局 */
3.  
   display: flex;
4.  
   /* 子元素水平居中 */
5.  
   justify-content: center;
6.  
   /* 子元素垂直居中 */
7.  
   align-items: center;
8.  
   }

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

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

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

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

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

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

缺点：

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

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

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

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

写了多少文字，显示多长

1.  
   .box {
2.  
   width: 600px;
3.  
   height: 400px;
4.  
   background-color: rgb(117, 51, 216);
5.  
   }
6.  
    
7.  
   p {
8.  
   width: fit-content;
9.  
   background-color: pink;
10.  
    }

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

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

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

1.  
   .box {
2.  
   position: relative;
3.  
   }
4.  
    
5.  
   img {
6.  
   width: 200px;
7.  
   height: 200px;
8.  
   position: absolute;
9.  
   top: 50%;
10.  
    left: 50%;
11.  
    margin-top: -100px;
12.  
    margin-left: -100px;
13.  
    }

缺点：

需要设置元素宽高。

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

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

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

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

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

1.  
   img {
2.  
   vertical-align: middle;
3.  
   }

这篇好文章是转载于：学新通技术网