<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 1000px; height: 50px; background: pink; /*文本居中*/ text-align: center; /*使用版心居中必须满足两个条件:1.必须是块级的显示模式 2.必须要有宽*/ /*注意:下面的50必须给单位px,否则就不是距离顶部50px,距离左边,右边等距的效果了.*/ /*因为:margin参数中,如果有两个值的情况下,第一个参数表示的是距离顶部和底部的距离,第二个参数是距离左右的距离*/ margin:50px auto; } p{ width: 500px; height: 30px; background: green; margin: auto; } </style> </head> <body> <div> <p></p> </div> </body> </html>