CSS中的居中,在工作中,会经常遇到。它可以分为水平居中和垂直居中,以下是几种实现居中的方式。
以下例子中,涉及到的CSS属性值。
.parent-frame {
width: 200px;
height: 200px;
border: 1px solid red;
}
.child-frame {
width: 100px;
height: 100px;
border: 1px dotted blue;
}
1: text-align:center,水平居中
块状元素,水平居中
<div class="parent-frame">
子元素水平居中
<i style="display:block; text-align: center;color: blue">块状元素,水平居中</i>
</div>
子元素水平居中
块状元素,水平居中
2:margin: 0 auto,水平居中
水平居中。上下外边框距为0,左右外边距浏览器会自动计算平分
<div class="parent-frame">
子元素水平居中
<i class="child-frame" style="display: block;margin: 0 auto">块状元素,水平居中</i>
</div>
子元素水平居中
块状元素,水平居中
3:line-hei