<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <!-- text-align水平居中是对父级使用还是子级使用 --> <div style="width: 100px; height: 100px; border: 1px solid #ccc"> <p>居中</p> </div> <div style="width: 100px; height: 100px; border: 1px solid #ccc"> <p style="text-align: center">居中</p> </div> <div style=" width: 100px; height: 100px; border: 1px solid #ccc; text-align: center; " > <p>居中</p> <!-- text-align属性,只对子元素起作用,并且可以被子元素继承 --> </div> </body> </html>