html中div运用CSS实现水平/垂直居中的多种方式

nykek5i

以下例子中，触及到的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-height值，垂直居中

垂直居中。line-height属性，设置行间的距离（行高）。不准许运用负值。

单行文本的元素才适用，多行元素中不适用这种办法。元素内容是单行，并且其高度是固定不变的，

<div class="parent-frame"> <div style="line-height: 200px;">line-height值=父height值</div> </div>

line-height值=父height值

4： 运用float属性，协同relative定位，实现水平居中

给父元素设置float，而后将父元素整体向右移动50%，再将子元素整体向左移动50%，来实现水平居中。

记得将父元素清除浮动。

<div class="parent-frame"> <div style="float: left; position: relative; left: 50%; clear: both;" > <div style="position: relative; left: -50%">虽然宽度区别weiqinl</div> </div> <div style="float: left; position: relative; left: 50%; clear: both;"> <div style="position: relative; left: -50%">但同样</div> </div> <div style="float: left; position: relative; left: 50%; clear: both;"> <div style="position: relative; left: -50%">水平居中了</div> </div> <div style="float: left; position: relative; left: 50%; clear: both;"> <div style="position: relative; left: -50%">运用float属性，记得清楚浮动</div> </div> </div>

虽然宽度区别weiqinl 但同样 水平居中了 运用float属性，记得清楚浮动

5：运用table布局，默认垂直居中

table默认垂直居中vertical-align:middle。倘若还想要水平居中，那便是行内元素，添加属性text-align: center

<table clas

星☆雨

感谢你的精彩评论，为我的思绪打开了新的窗口。

4zhvml8

你的见解真是独到，让我受益匪浅。

wrjc1hod

回顾过去一年，是艰难的一年；展望未来，是辉煌的一年。