CSS中实现块级元素水平居中的N种方法
最编程
2024-01-05 20:18:43
...
CSS中实现块级元素水平居中的N种方法：
CSS中的居中可分为水平居中和垂直居中。
水平居中分为行内元素居中和块状元素居中两种情况，而块状元素又分为定宽块状元素居中和不定宽块状元素居中。
下面详细介绍这几种情况。
一、水平居中
1、行内元素居中
顾名思义，行内元素居中是只针对行内元素的，比如文本（text）、图片（img）、按钮等行内元素，
可通过给父元素设置 text-align:center 来实现。
另外，如果块状元素属性display 被设置为inline时，也是可以使用这种方法。
但有个首要条件是子元素必须没有被float影响，否则一切都是无用功。
<style>
.div1{
text-align: center;
}
</style>
<body>
<div class="div1">Hello world</div>
</body>
2、块状元素居中
（1）、定宽块状元素居中
满足定宽（块状元素的宽度width为固定值）和块状两个条件的元素可以通过设置“左右margin”值为“auto”来实现居中。
<style>
.div1{
width: 200px;
border: 1px solid red;
margin: 0 auto;
}
</style>
<body>
<div class="div1">Hello world</div>
</body>
（2）、不定宽块状元素居中
在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。)
有三种方法可以对不定宽块状元素进行居中：
方法1：
将要显示的元素加入到 table 标签当中，然后为 table 标签设置“左右m