父元素使用flex布局，子元素使用margin:auto<divclass="parent-frame"style="display:flex;"><divstyle="margin:auto;">父元素使用flex布局，子元素配合margin:auto使用</div></div>父元素使用flex布局，子元素配合margin:auto使用

父元素使用flex布局,并定义两个属性值justify-content，align-items都为center，那么就定义为水平垂直居中justify-content属性定义了项目在主轴上的对齐方式。align-items属性定义项目在交叉轴上如何对齐。<divclass="parent-frame"style="display:flex;justify-content:center;...

使用百分比来绝对定位一个元素，并配合使用translate，将元素移动定位居中。<divclass="parent-frame"style="position:relative;">利用绝对定位，配合translate移动到水平垂直居中。<divclass="child-frame"style="position:absolute;top:50%;left:50%;tra...

negativemargins负边距，会使结构塌陷，利用这个特点来实现。<divclass="parent-frame"style="position:relative;">利用绝对定位，配合margin的负值来实现居中。<divclass="child-frame"style="position:absolute;top:50%;left:50%;margin-top...

相对应于relative的绝对定位absolute，需要定宽。同时，top/bottom应该相等，并且相加不超过定宽度。right/left也应该相等，并且相加不超过定宽。再配合margin：auto使用<divclass="parent-frame"style="position:relative">利用绝对定位，配合margin:auto自动计算外边距。<divclass="c...

该属性设置元素的垂直对齐方式。定义行内元素的基线相对于该元素所在行的基线的垂直对齐。在表单元格中，这个属性会设置单元格框中的单元格的对齐方式。<divclass="parent-frame"style="display:table-cell;vertical-align:middle">仿table:display:table-cell垂直居中vertical-align:middle...

table默认垂直居中vertical-align:middle。如果还想要水平居中，那就是行内元素，添加属性text-align:center<tableclass="parent-frame"><tr><td>table默认垂直居中[vertical-align:middle]</td><tdstyle="text-align:center;">水平居中添加text-alig...

给父元素设置float，然后将父元素整体向右移动50%，再将子元素整体向左移动50%，来实现水平居中。记得将父元素清除浮动。<divclass="parent-frame"><divstyle="float:left;position:relative;left:50%;clear:both;"><divstyle="position:relative;left:...

垂直居中。line-height属性，设置行间的距离（行高）。不允许使用负值。单行文本的元素才适用，多行元素中不适用这种方法。元素内容是单行，并且其高度是固定不变的，<divclass="parent-frame"><divstyle="line-height:200px;">line-height值=父height值</div></div>line-height值=父height值

平居中。上下外边框距为0，左右外边距浏览器会自动计算平分<divclass="parent-frame">子元素水平居中<iclass="child-frame"style="display:block;margin:0auto">块状元素，水平居中</i></div>web前端开发学习Q-q-u-n：784783012，分享学习的方法和需要注意的小细节子元素水平居中块状元素...