文本或行内元素居中
对于文本或行内元素,只需要在父级(因为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这时设置成了行内元素*/