块状元素水平居中--过往小结（margin：0 auto / table(<tbody>、<tr>、<td>) / diplay:inline / float:left;p...

块状元素的水平居中分为：定宽块状元素的水平居中和不定宽块状元素的水平居中

　　一、定宽块状元素的水平居中：通过margin：0 auto来设置 ，例如：

div{
    border:1px solid red;
    
    width:200px;
    margin:20px auto;
}

<div>我是定宽块状元素，我要水平居中显示。</div>

　　　　二、不定宽块状元素水平居中：

　　　　不定宽度的块状元素有三种方法居中：

1. 加入 table 标签
2. 设置 display: inline （内联元素）方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
3. 设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的

 

　　1、加入table标签( 包括 <tbody>、<tr>、<td> )：

　　　　第一步：利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。例如：

<style type="text/css">
        table{
            margin: 0 auto;
            background-color:#E5E5E5;
            border: 1px solid black;
        }
        #div1{
            background-color:#E9967A;
        }

    </style>

 

<div id="div1">
　　<table>
        <tr>
        <td>
        让我水平居中吧！ 
        </td>
        </tr>
 </table>
</div>

 

结合<ul>、<li>可以让多行居中。

 

　　2、改变块级元素的 display 为 inline 类型（设置为行内元素显示），然后使用 text-align:center (文本居中)来实现居中效果，例如：

<style type="text/css">
        #div1{
            display: innline;
            text-align: center;
            background-color: pink;
        }
</style>

<div id="div1">
                让我水平居中吧！
</div>

 

　　3、通过给父元素设置 float:left;， position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。例如：

　　

<style type="text/css">
        #div1{
            position: relative;
            float: left;
            left: 50%;
            border:2px solid blue;
        }
        #div2{
            position: relative;
            left: -50%;
            border: 2px solid black;
        }
</style>

<div id="div1">
    <div id="div2">
        让我水平居中吧！
    </div>
</div>

 这个方法可能不理解什么意思，父元素div通过left:50%让父元素的盒子左边与浏览器窗口中线对其，然后子元素再通过left:-50%让其中线与浏览器中线对其以此完成水平居中，还是不理解的话可以自行操作试试，设置了边界线应该可以很容易的理解原理

 

其实我有一点不明白，就是为什么父元素一定要设置 float:left; 少了这个设置父元素的宽度变成了不是自适应宽度的div，希望知道的客友告知，谢谢啦！

转载于:https://www.cnblogs.com/SONLY-s/p/7577341.html