1.传统HTML CSS水平居中（不包含前端框架）
1.1:设置固定宽度的方法
关键代码描述：居中元素必须设置 宽度，然后设置margin
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta> 5 </head> 6 <style> 7 8 9 div{ 10 width: 500px; /*必须设置宽度，以下margin才有效*/ 11 margin: 0 auto; 12 border: 1px solid; 13 } 14 </style> 15 <body> 16 <div> 17 aaaa 18 </div> 19 </body> 20 </html>
1.2：行内块设置，居中元素设置行内inline-block
关键代码描述：子元素必须设置行内显示，父元素必须设置文本居中
<!DOCTYPE html> <html> <head> <meta> </head> <style> .pages2{ text-align: center;/*父元素必须设置文本居中，子元素设置行内现实，才会居中*/ border: 1px solid; } .pages2 div { display: inline-block;/*子元素必须设置*/ border: 1px solid; width: 500px; } </style> <body> <div class="pages2"> <div> aaaa </div> </div> </body> </html>
1.3设置浮动居中
关键代码描述：父元素开启相对定位，左浮动，这个时候父元素处于水平线右侧，
这个时候，只要将子元素右侧浮动一般，刚好居中显示。
<!DOCTYPE html> <html> <head> <meta> </head> <style> .pages2{ border: 2px solid red; position: relative;/*必须开启相对定位*/ left: 50%;/*让父元素刚好处于水平线右侧*/ float: left;/*目的是脱离文档流，使宽度为子元素内容的高度，宽度，用于配合定位*/ } .pages2 div { border: 1px solid; position: relative;/*子元素开启相对定位*/ right: 50%;/*相对父元素，右偏移一半，刚好居中*/ float: left;/*配合定位*/ } </style> <body> <div class="pages2"> <div> aaaaa </div> </div> </body> </html>
1.4:设置fit-content
关键代码描述：设置父元素的fit-content 可以达到居中效果
<!DOCTYPE html> <html> <head> <meta> </head> <style> .con{ border: 1px solid; width: fit-content;/*必须设置fit-content*/ width:-moz-fit-content; margin: auto; } </style> <body> <div class="con"> <div class="pages2"> <div> aaaaa </div> </div> </div> </body> </html>
1.5设置居中元素display：table,margin:0 auto;
<!DOCTYPE html> <html> <head> <meta> </head> <style> .pages2 div{ border: 1px solid; display: table; /*当前居中元素设置*/ margin: 0 auto;/*当前居中元素设置*/ } </style> <body> <div class="con"> <div class="pages2"> <div> aaaaa </div> </div> </div> </body> </html>
1.6,父元素设置dispaly:flex jsutify-content:center
<!DOCTYPE html> <html> <head> <meta> </head> <style> .con{ /*父元素设置*/ border: 1px solid; display: flex; justify-content: center; } </style> <body> <div class="con"> <div class="pages2"> <div> aaaaa </div> </div> </div> </body> </html>
1.7 父元素设置display:flex 子元素设置margin:0 auto
<!DOCTYPE html> <html> <head> <meta> </head> <style> .con{ border: 1px solid; display: flex; } .pages2 { margin: 0 auto; } </style> <body> <div class="con"> <div class="pages2"> <div> aaaaa </div> </div> </div> </body> </html>
2.div垂直居中
2.1 设置父元素的display:flex ; flex-direcion:column;justify-content:center
关键代码描述：一定要设置高度height
<!DOCTYPE html> <html> <head> <meta> </head> <style> html,body{ width: 100%; height: 100%; } .pages2 div{ border: 1px solid; display: table; margin: 0 auto; } .con{ height: 100%; /* 设在高度 */ display: flex; flex-direction: column; justify-content: center; } </style> <body> <div class="con"> <div class="pages2"> <div> aaaaa </div> </div> </div> </body> </html>
2.2 设在父元素display:table ; 子元素两个属性
<!DOCTYPE html> <html> <head> <meta> </head> <style> html,body{ width: 100%; height: 100%; } .con{ height: 100%;/* 一定要设置高度*/ display: table; } .pages2 { display: table-cell; vertical-align: middle; } </style> <body> <div class="con"> <div class="pages2"> <div> aaaaa </div> </div> </div> </body> </html>
2.3 设置父元素的display:flex
<!DOCTYPE html> <html> <head> <meta> </head> <style> .con{ height: 100vh; display: flex; justify-content: center; align-items: center } </style> <body> <div class="con"> <div class="pages2"> aaa </div> </div> </body> </html>
2.4
<!DOCTYPE html> <html> <head> <meta> </head> <style> .con{ height: 100vh; display: grid; } .pages2{ margin: auto; } </style> <body> <div class="con"> <div class="pages2"> aaa </div> </div> </body> </html>