CSS常见的居中方法

文本或行内元素居中

对于文本或行内元素,只需要在父级(因为text-align是可继承的)或元素本身添加text-align: center;即可,如果需要垂直居中的话只需要给子元素设置与父元素height值相同的line-height即可.

<div style="height: 40px; text-align: center; background-color: #ccc;"><span style="line-height: 40px;">text text</span>
</div>

块级元素居中

方法一：利用绝对定位实现元素垂直，水平居中显示：

需要知道元素的宽度和高度。通过设置需要定位的div元素为position: absolute, 然后通过top:50%, left:50%再加上margin-top: 负div高度的一半，margin-left:负div宽度的一半。也适用于img ,span等行内元素。

<div style="position: relative; background-color: #ccc;width: 300px;height: 300px;"><!-- 已知当前元素宽高时 --><!-- <div style="width: 100px;height: 100px;background-color: #999;position: absolute;top: calc(50% - 50px);left: calc(50% - 50px);/* 或 两者效果一样 *//* top: 50%;left: 50%;margin-top: -60px;margin-left: -60px; */"></div> --><!-- 未知当前元素宽高  推荐使用此方法 --><div style="width: 100px;height: 100px;position: absolute;top: 50% ;left: 50% ;transform: translate(-50% , -50% );background-color: #999;"></div>
</div>

方法二：利用margin: 0 auto实现块级元素水平居中

此方法只能只能水平居中。另外需注意，必须设置元素的宽度才能实现居中！利用此方法若要实现img等行内元素居中需要加上display: block。

<div style="background-color: #ccc;width: 300px;height: 300px;"><div style="width: 100px;height: 100px;background-color: #999;margin: 0 auto;"></div>
</div>

方法三：利用position和margin 实现垂直水平居中：

此方法不需要知道元素的宽高只需要给子元素设置position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;即可

<div style="
position: relative;
background-color: #ccc;
width: 300px;
height: 300px;
"><div style="width: 100px;height: 100px;position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;background-color: #999;"></div>
</div>

方法四：利用flex实现居中(推荐)：

此方法不需要知道元素的宽高,对比上面几种方法此方法最为简洁

<div style="
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
background-color: #ccc;
"><div style="width: 100px;height: 100px;background-color: #999;"></div>
</div>

方法四：根据display: table-cell 和 vertical-align: middle：

vertical-align这个属性会设置单元格框中的单元格内容的对齐方式,必须给子元素设置 display: inline-block;才能生效。

<div style="
width: 300px;
height: 300px;
display: table-cell;
text-align: center;
vertical-align: middle;
background-color: #ccc;
"><div style="display: inline-block;width: 100px;height: 100px;background-color: #999;"></div>
</div>

行内元素和块级元素

什么叫行内元素？

常见的span、a、lable、strong、b等html标签都是行内元素

默认情况下，行内元素均无法设置宽度、高度、上下方向margin的外边距等

当然，这不是绝对的，通过CSS可以让任何行内元素变成块级元素！比如：

span{display:block} /*span这时设置成了块级元素*/

什么叫块级元素？

常见的div、p、li、h1、h2、h3、h4等html标签都是块级元素

当然，这也不是绝对的，通过CSS可以让任何块级元素变成行内元素！比如：

h1{display:inline} /*h1这时设置成了行内元素*/