web前端入门到实战：行内和块状元素水平居中与单行或多行文本垂直居中及隐性改变display类型

本文链接：https://blog.csdn.net/ITHHH111/article/details/105474931

本文介绍了web前端中行内元素和块状元素的水平居中方法，包括text-align、margin auto、display类型转换等。对于不定宽块状元素，提供了table布局、display:inline和position相对定位的解决方案。此外，还讨论了单行和多行文本在确定高度父元素中的垂直居中策略，如line-height与height一致，以及使用table和display:table-cell的方法。最后提到了某些CSS属性对display类型的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

行内元素水平居中如何设置？如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>行内水平居中设置</title>
 6         <style type="text/css">
 7             div.box1,h5{
 8                 border: 1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
 9                 text-align: center;
10             }
11         </style>
12     </head>
13     <body>
14         <h5>行内元素水平居中如何设置？如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。</h5>
15         <div class="box1"><img src="https://www.cnblogs.com/images/logo_small.gif" ></div>
16     </body>
17 </html>

当被设置元素为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

A.定宽块状元素(块状元素的宽度width为固定值)如何设置水平居中?满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。同时margin-left:auto;margin-right:auto;元素的margin是可以随意设置的。

专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）


 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>定宽块状元素设置</title>
 6         <style type="text/css">
 7             div.box1{
 8                 border: 1px solid red;
 9                 width: 600px;
10                 /*text-align: center;*//*当被设置元素为 块状元素 时用 text-align：center 就不起作用了*/
11                 margin: 0 auto;
12                 /* margin-left: auto; 13 margin-right: auto; */
14             }
15         </style>
16     </head>
17     <body>
18         <div class="box1">明日复明日，明日何其多，我生待明日，万事成蹉跎</div>
19     </body>
20 </html>

B.不定宽度的块状元素（块状元素的宽度width不固定）设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。不定宽度的块状元素有三种方法居中1.加入 table 标签2.设置 display: inline 方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置3.设置 position:relative 和 left:50%：利用相对定位的方式，将元素向左偏移 50% ，即达到居中的目的

B-1:为什么选择方法一加入table标签? 是利用table标签的长度自适应性—即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括<tbody>、<tr>、<td> )。第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

B-2:改变元素的display类型为行内