基本思路很笼统。水平居中比垂直居中简单得多。对于行内元素（inline、inline-block、inline-table、inline-flex），父元素设置为text-align:center;;对于块级元素，子元素设置margin:0auto;。下面结合水平居中强调垂直居中。1、父元素宽高已知，父元素定位不是static，子元素定位设置为position:absolute/fixed，然后使用margin、left、top属性居中。#div1{宽度：200px；高度：200px；位置：相对；背景色：#ffff00；}#div2{宽度：100px；高度：100px；位置：绝对；顶部：50%；左：50%；左：-50px；边距顶部：-50px；background-color:#ff00ff;}注意：需要知道父元素的固定宽高，才能确定margin-left和margin-right。2、子元素为内联元素，父元素设置line-height属性为垂直居中。#div1{宽度：200px；高度：200px；行高：120px；文本对齐：居中；位置：相对；背景色：#ffff00；}#div2{宽度：100px；普通的;文本对齐：左；显示：内联块；background-color:#ff00ff;}注意：在确定line-height之前，需要知道父元素的固定高度。3、子元素为内联元素，父元素使用display:table-cell；和垂直对齐：中间；属性来实现垂直居中。#div1{宽度：200px；高度：200px；显示：表格单元格；文本对齐：居中；垂直对齐：中间；背景色：#ffff00；}#div2{宽度：100px；行内块；background-color:#ff00ff;}注意：不需要确定父元素的宽高。inline-block和table-cell与ie67不兼容。还有一种方案，就是利用伪元素::after包裹容器突出高度，实现内联元素垂直居中#div1{width:200px;高度：200px；背景色：#ffff00；文本对齐：居中；}#div1::after{内容：“”；显示：内联块；高度：100%；垂直对齐：中间；}#div2{宽度：100px；显示：内联块；背景色：#cccccc；子级内联元素（多个子元素不适用）4、对于子级块级元素，父级元素也使用display:table-cell；和垂直对齐：中间；实现垂直居中和水平居中margin的属性：0auto；.#div1{宽度：200px；高度：200px；显示：表格单元格；垂直对齐：中间；背景色：#ffff00；}#div2{宽度：100px；高度：100px；:#ff00ff;}注意：不需要确定父元素的宽高，table-cell不兼容ie675，使用css3translate特性：根据元素宽高位移。#div1{宽度：200px；高度：200px；位置：相对；背景色：#ffff00；}#div2{宽度：100px；高度：100px；位置：绝对；顶部：50%；左：50%；翻译（-50%，-50%）；-webkit-transform:翻译(-50%,-50%);-moz-transform:翻译(-50%,-50%);-ms-transform:翻译(-50%,-50%);background-color:#ff00ff;}注意：不需要确定父元素的宽高，translate属性兼容IE9+6，当父元素浮动时，使用display:table-cell;它将无效。这时候需要包裹三层，第一层display:table;，第二层display:table-cell;第三个中间层#div1{width:200px;高度：200px；位置：相对；显示：表格；背景色：#ffff00；浮动：左；}#div2{宽度：100%；高度：100%；显示：表格单元格；垂直对齐：中间；/*文本对齐：居中；*/background-color:#cccccc;}#div3{width:100px;高度：100px；保证金：0自动；/*显示：内联块；*/background-color:#ff00ff;}注意：不需要确定父元素的宽度High，但是HTML标签层数较多。7、绝对定位加四边定位为0，margin为auto。#div1{宽度：200px；高度：200px；位置：相对；背景色：#ffff00；}#div2{宽度：100px；高度：100px；顶部：0；左：0；右：0；底部：0；保证金：自动；位置：绝对；background-color:#cccccc;}注意：不需要确定父元素的宽高，但是所有的定位属性都用到了8.使用flex布局justify-content:center;并对齐项目：居中；该属性居中。#div1{宽度：200px；高度：200px；显示：弹性；弹性方向：行；证明内容：居中；对齐项目：居中；背景色：#ffff00；}#div2{宽度：100px；100像素；background-color:#cccccc;}注意：不需要确定父元素的宽高，兼容IE10+9，使用网格布局，分成3x3的网格，第二行第二列垂直居中，水平#div1{宽度：200px;高度：200px；显示：网格；背景色：#ffff00；网格模板列：重复（3、1fr）；grid-template-rows:repeat(3,1fr);}#div2{宽度：100px;高度：100px；背景色：#cccccc；网格行开始：2；grid-column-start:2;}注：无需确定父元素的宽高，兼容Firefox52、Safari10.1、Chrome57、Opera4410，使用flex或grid布局结合margin:auto;#div1{宽度：200px;高度：200px；显示：弹性；/*显示：网格；*/}#div2{宽度：100px；高度：100px；margin:auto;}注意：这种方式最简洁，但是与flex/grid存在兼容性问题