程度居中
- 内联元素
text-align:center- 块级元素程度居中
定宽状况下：
1、利用margin
margin-left:auto;margin-right:auto;2、margin负值+相对定位
<!DOCTYPE html><html> <head> <style> .parent{ position: relative; width: 100%; } .child{ width: 200px; height: 200px; position: absolute; left: 50%; margin-left: -100px; background-color: cyan; } </style> </head> <body> <div class="parenet"> <p class="child">margin负值+相对定位设置程度居中</p> </div> </body></html>3、相对定位+margin auto
<!DOCTYPE html><html> <head> <style> .parent{ position: relative; width: 100%; } .child{ width: 200px; height: 200px; position: absolute; left: 0; right: 0; margin: auto; background-color: cyan; } </style> </head> <body> <div class="parenet"> <p class="child">相对定位+margin auto设置程度居中</p> </div> </body></html>4、flex布局
<!DOCTYPE html><html> <head> <style> .parent{ display: flex; justify-content: center; width: 100%; } .child{ width: 200px; background-color: cyan; } </style> </head> <body> <div class="parent"> <p class="child">flex程度居中</p> </div> </body></html>宽度未知状况下：
1、相对定位,左右间隔设置雷同
<!DOCTYPE html><html> <head> <style> .parent{ position: relative; } .child{ position: absolute; left:25%; right: 25%; background-color: cyan; } </style> </head> <body> <div class="parenet"> <p class="child">相对定位设置程度居中，宽度未知</p> </div> </body></html>2、相对布局+translate
<!DOCTYPE html><html> <head> <style> .parent{ position: relative; } .child{ position: absolute; left: 50%; transform: translate(-50%); background-color: cyan; } </style> </head> <body> <div class="parenet"> <p class="child">相对定位设置程度居中，宽度未知</p> </div> </body></html>垂直居中
- 行内元素状况
height 和 line-height 相等 - 块级元素
和程度居中解决原理雷同