文章目录第一种第二种第三种第四种第五种第六种
第一个
绝对定位方法：不确定目前div的宽度和高度，采用transform3360translate(-50%，-50% )。 当前div的父级附加相对位置(位置： relative； ）
！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title水平垂直中心方法1/title style /*使用绝对对齐，不确定子div的宽度高度。 父元素是需要添加位置3360 rela ang的位置： relative； width: 500px； height: 500px； } .son { background: green； 位置： absolute； left: 50%； top: 50%； 传输：传输(-50%、-50%； }/style/headbodydivclass=' father ' divclass=' son ' hello Simon/div/div/body/html
第二种绝对对齐方法：确定当前div的宽度，margin值为当前div宽度一半的负值
！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title水平垂直中心方法2/title style /*使用绝对对齐来确定子div的宽度高度，而margin值为width: 500px； height: 500px； } .son { width: 200px； 高： 200 px； 背景：绿色； 位置： absolute； left: 50%； top: 50%； 玛格琳- left :-100 px； margin-top: -100px； }/style/headbodydivclass=' father ' divclass=' son ' hello Simon/div/div/body/html
第三种绝对对齐方法：在绝对对齐下，所有顶层光线底部均设置为0，边距设置为自动
！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title水平垂直中心方法3/title style /*使用绝对对齐，以确保子div的宽度高度、左、右width: 500px； height: 500px； } .son { width: 200px； 高： 200 px； 背景：绿色； 位置： absolute； left: 0； top: 0； bottom: 0； right: 0； margin :自动； }/style/headbodydivclass=' father ' divclass=' son ' hello Simon/div/div/body/html
第四种flex布局方法：将flex css样式添加到当前div的父级
！ 使用doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title水平垂直中心方法4/titlestyle/*flex布局，在父div中显示flex布局样式对齐width: 500px； height: 500px； -webkit-display: flex； 显示： Flex； -WebKit-align-items3360中心； align-items3360中心； -网络工具包- justify-content :中心； justify-content: center； } .son { width: 200px； 高： 200 px； 背景：绿色； }/style/headbodydivclass=' father ' divclass=' son ' hello Simon/div/div/body/html
第五个table-cell实现了水平、垂直、中央： table-cell middle center的组合使用
！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title水平垂直中心方式5/title style /*table-cell、vertical-align、text ht ht display :表蜂窝； 垂直对准：米； 文本对齐3360中心； 背景色： red； } .son { width: 200px； 高： 200 px； 背景色： green； display :在线区块； }/style/headbodydivclass=' father ' divclass=' son ' hello Simon/div/div/body/html
第六个绝对位置： calc (基于函数动态计算的水平垂直居中
！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title水平垂直中心方式6/title style.father { position : relative； border : 1px固态# f40； 背景色： # f30； width: 80vw； 高海拔： 80vh； } .son { position: absolute； width: 30vw； 高： 30vh； 背景色： # ff0； left:-moz-calc((80VW-30VW )/2 )； top:-moz-calc((80VH-30VH )/2 )； left :-WebKit-calc ((80vw-30vw )/2 )； top : -维基百科((80vh-30vh )/2 )； left:calc((80VW-30VW )/2 )； top:calc((80VH-30VH )/2 )； (} /style/headbody！ -绝对对齐calc ) )基于动态计算的水平垂直中心对齐--div class=' father ' div class=' son ' hello Simon/div/div/body/html