方法一、将子元素转换为内联元素.par{文本对齐：居中；}.child{背景颜色：番茄；显示：内联块；}设置子元素为inline-block，这样可以像块元素一样设置box模型，像inline元素一样尝试text-align:center设置子元素为inline-block后，子元素为块级元素，宽度为内容宽度方法二、将子元素转换为table.par{}.child{background-color:tomato;显示：表格；保证金：0自动；}table元素是块级元素，其宽度自适应内容宽度，所以使用display:table对子元素进行变换，将块元素设置为居中。margin:0auto方法3.使用position+transform组合.par{position:relative;}.child{背景颜色：番茄；宽度：300px；位置：绝对；左：50%；转换：translateX(-50%)；}因为子元素是块级元素（div），默认占父元素的宽度，所以我们设置子元素的宽度为300px。原理很简单。先使用绝对定位将子元素放置在父元素左边框的中间位置，然后将子元素向左移动自身的一半，达到居中的效果注意position:relative设置的是父元素为参照用于子元素绝对定位的对象。方法4.Justify-content.par{使用flex布局显示：弹性；证明内容：居中；}.child{背景颜色：番茄；}由于flex-grow属性默认值为0，flex-basis属性默认值为auto，所以width为内容宽度（如果没有设置指定值，否则为指定值）顺便说一句，flex很强大。垂直中心高度是元素高度，所以没有指定具体值。方法一、将父元素转换??为table-ceil.par{height:500px;显示：表格单元格；垂直对齐：中间；}.child{背景颜色：番茄；}子元素的宽度就是内容的宽度，父元素的宽度就是子元素的宽度方法二，使用position+transform组合.par{height:500px;位置：绝对；}.child{背景颜色：番茄；宽度：300px；位置：绝对；顶部：50%；变换：翻译Y(-50%)；.align-items使用弹性布局.par{height:500px;显示：弹性；对齐项目：居中；}.child{背景颜色：番茄；宽度：300px；}水平居中和垂直居中结合以上两种居中布局方法1.使用inline-block+text-align+table-cell+vertical-align.par{width:500px;高度：500px；边框：1px实心#ccc；文本对齐：居中；显示：表格单元格；垂直对齐：中间；}.child{背景颜色：番茄；宽度：300px；显示：内联块；位置+变换组合.par{width:500px;高度：500px；边框：1px实心#ccc；位置：相对；}.child{背景颜色：番茄；宽度：300px；位置：绝对；左：50%；最高：50%；转换：翻译（-50%，-50%）；}方法3.使用flexlayout.par{width:500px;高度：500px；边框：1px实心#ccc；显示：弹性；证明内容：居中；对齐项目：居中；}.child{背景颜色：番茄；宽度：300px；}有问题欢迎提问，实践出真知