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>子元素水平居中<i>块状元素,水平居中</i></div>
子元素水平居中
块状元素,水平居中
2:margin: 0 auto,水平居中
水平居中。上下外边框距为0,左右外边距浏览器会自动计算平分
<div>子元素水平居中<i>块状元素,水平居中</i></div>web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
子元素水平居中
块状元素,水平居中
3:line-height值,垂直居中
垂直居中。line-height属性,设置行间的距离(行高)。不允许使用负值。
单行文本的元素才适用,多行元素中不适用这种方法。元素内容是单行,并且其高度是固定不变的,
<div><div>line-height值=父height值</div></div&