前端面试重点——居中问题

时间：2023-04-02 16:48:08 HTML

前端面试重点——居中问题在页面布局开发中，居中问题是我们经常遇到的问题。掌握居中问题对于解决页面布局非常重要，也是常见的面试重点。本文总结了一些常用的居中方法和一些注意事项，可以作为学习笔记。[toc]1.水平居中1.inline-block+text-align确保子元素是行内块级元素后，给父元素text-align:center;这种情况对固定宽度和可变宽度的子元素都有效。child

.parent{text-align:center;}.child{display:inline-block;}2.table+margin此时表格的宽度就是内容的宽度，表格可以使用marginchild

.child{显示：表格；margin:0auto;}3.absolute+transform确定父元素的相对定位后，子元素通过绝对定位在父元素内居中。该方法适用于子元素定宽或变宽，通用方法。child.parent{position:relative;}.child{position:absolute;左：50%；top:translateX(-50%);}4.flex+justify-content弹性布局（flexlayout）也是一种常见的居中方式，只需要在父元素中添加灵活布局格式，并设置横轴对齐即可justify-content设置中心。child.parent{显示：flex;justify-content:center;}在选择居中对齐时，还可以考虑子元素的宽度是否确定，如果确定了宽度，也可以水平居中：margin:0auto;。注意点：text-align用于设置元素中文本行内元素的对齐方式；text-align只对行内元素有效，对块元素无效，不能设置块元素的对齐方式；2.垂直居中1.line-height=height（仅适用于单行行内元素）这种方法在设置单行块时特别有效，需要知道父元素的高度。child.parent{height:100px;}.child{line-height:100px;}2.table-cell+vertical-align（单行，多行可居中）利用表格单元格的特性，支持单元格居中。child.parent{显示：表格单元格；vertical-align:middle;}3.absolute+transform父元素相对布局，子元素绝对布局适用于很多场景。child.parent{position:relative;}.child{position:absolute;顶部：50%；transfrom:translateY(-50%);}4.flex+align-itemflex布局，通过垂直对齐align-item设置横轴对齐。child.parent{显示：flex;align-items:center;}3.水平和垂直居中上述水平居中的方法结合垂直居中的方法，可以实现水平和垂直居中。1.inline-block+text-align+table-cell+vertical-alignchild.parent{diaplay:teable-cell;文本对齐：居中；vertical-align:middle;}.child{display:inline-block;}2.margin:auto对于已知宽高的元素，父元素相对定位，子元素绝对定位。child.parent{position:relative;}.child{position:absolute;顶部：0；右：0；左：0；底部：0；margin:auto;}3.transform+translate无论是否给定宽高，都可以使用父元素的相对定位和子元素的绝对定位。（未知宽高可能是行内元素）顶部：50%；左：50%；转换：翻译（-50%，-50%）；}4。flexflex布局，设置主轴和交叉轴的对齐方式。child.parent{显示：flex;证明内容：居中；align-items:center;}注意：内联元素设置宽高无效。可以通过设置line-height来设置行内元素的高度。为行内元素设置margin或padding只对left和right有效，对top和bottom无效。flex的兼容写法（仅ie9及以上支持）：{display:-webkit-box;显示：-webkit-flex；显示：-moz-flex；显示：-ms-flexbox；显示：flex；}（完）

上一篇：优秀程序员HTML5大前端分享web前端面试题

下一篇：简述vue-router的实现原理

前端面试重点——居中问题相关文章