html中div使⽤CSS实现⽔平垂直居中的多种⽅式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 >块状元素，⽔平居中</i>
</div>
⼦元素⽔平居中
块状元素，⽔平居中
2：margin: 0 auto，⽔平居中
⽔平居中。上下外边框距为0，左右外边距浏览器会⾃动计算平分
<div class="parent-frame">
⼦元素⽔平居中
<i class="child-frame" >块状元素，⽔平居中</i>
</div>
3：line-height值，垂直居中
垂直居中。line-height属性，设置⾏间的距离（⾏⾼）。不允许使⽤负值。
单⾏⽂本的元素才适⽤，多⾏元素中不适⽤这种⽅法。元素内容是单⾏，并且其⾼度是固定不变的，
<div class="parent-frame">
<div >line-height值=⽗height值</div>
</div>
line-height值=⽗height值
4：使⽤float属性，配合relative定位，实现⽔平居中
给⽗元素设置float，然后将⽗元素整体向右移动50%，再将⼦元素整体向左移动50%，来实现⽔平居中。
记得将⽗元素清除浮动。
<div class="parent-frame">
<div >
<div >虽然宽度不同weiqinl</div>
</div>
<div >
<div >但⼀样</div>
</div>
<div >
<div >⽔平居中了</div>
</div>
<div >
<div >使⽤float属性，记得清楚浮动</div>
</div>
</div>
虽然宽度不同weiqinl
但⼀样
⽔平居中了
使⽤float属性，记得清楚浮
动
5：使⽤table布局，默认垂直居中
table默认垂直居中vertical-align:middle。如果还想要⽔平居中，那就是⾏内元素，添加属性text-align: center
<table class="parent-frame">
<tr>
<td>
table默认垂直居中[vertical-align: middle] </td>
<td >
⽔平居中添加text-align:center
</td>
</tr>
</table>
table默认垂直居中[vertical-align: middle]⽔平居中添加text-align:center
6: 仿table，display:table-cell。并使⽤vertical-align属性，实现垂直居中
该属性设置元素的垂直对齐⽅式。
定义⾏内元素的基线相对于该元素所在⾏的基线的垂直对齐。在表单元格中，这个属性会设置单元格框中的单元格的对齐⽅式。
<div class="parent-frame" >
仿table: display:table-cell垂直居中vertical-align:middle
</div>
仿table: display:table-cell垂
直居中vertical-align:middle
7: 使⽤absolute绝对定位，配合margin使⽤，实现⽔平垂直居中
相对应于relative的绝对定位absolute，需要定宽。同时，top/bottom应该相等，并且相加不超过定宽度。 right/left也应该相等，并且相加不超过定宽。
再配合margin： auto使⽤
<div class="parent-frame" >
利⽤绝对定位，配合margin:auto⾃动计算外边距。
<div class="child-frame" >
定宽元素，需要确定的尺⼨。relative是为了给⼦元素定位⽤。
</div>
</div>
8: 使⽤absolute绝对定位，配合margin的负值(negative margins)来实现⽔平垂直居中。
negative margins负边距，会使结构塌陷，利⽤这个特点来实现。
<div class="parent-frame" >
利⽤绝对定位，配合margin的负值来实现居中。
<div class="child-frame" >
负边距来实现，⽔平垂直居中。需要知道该元素的具体⼤⼩
</div>
</div>
9: 使⽤absolute绝对定位，配合translate 移动转换，实现⽔平垂直居中
使⽤百分⽐来绝对定位⼀个元素，并配合使⽤translate，将元素移动定位居中。
<div class="parent-frame" >
利⽤绝对定位，配合translate移动到⽔平垂直居中。
<div class="child-frame" >
不需知具体⼤⼩。⽀持IE9+及现代浏览器css设置文字垂直居中
</div>
</div>
10：使⽤flex布局，设置其属性justify-content，align-items都为center，实现⽔平垂直居中
⽗元素使⽤flex布局，并定义两个属性值justify-content，align-items都为center，那么就定义为⽔平垂直居中
justify-content属性定义了项⽬在主轴上的对齐⽅式。align-items属性定义项⽬在交叉轴上如何对齐。
<div class="parent-frame" >
<div class="child-frame">使⽤flex布局，justify-content属性定义了项⽬在主轴上的对齐⽅式。</div>
<div class="child-frame">
align-items属性定义项⽬在交叉轴上如何对齐。两个属性都居中，则⽔平、垂直居中对齐
</div>
</div>
⽔平、垂直居
11: 利⽤flex布局，配合margin：auto使⽤，实现⽔平垂直居中。
中对齐
⽗元素使⽤flex布局，⼦元素使⽤margin: auto
<div class="parent-frame" >
<div >⽗元素使⽤flex布局，⼦元素配合margin:auto使⽤</div>
</div>
⽗元素使⽤flex布局，⼦元
素配合margin:auto使⽤
[完]
发表评论