我在使用Chrome瀏覽器居中時遇到問題。它在JSfiddle中工作正常，但每當我將它放入Chrome中時，它都不居中。我嘗試使用margin：0 auto作爲像and和align-text：center這樣的塊元素，但是它們都沒有工作。這裏是我的HTML和CSS無法在Google Chrome瀏覽器的h1元素中居中顯示文字

*, 
 
*:before, 
 
*:after { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.container, 
 
.grid { 
 
    margin: 0 auto; 
 
    width: 960px; 
 
} 
 

 
.container { 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
} 
 

 
.col-1-3 { 
 
    width: 33.33%; 
 
} 
 

 
.col-2-3 { 
 
    width: 66.66%; 
 
} 
 

 
.col-1-3 { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 

 
.grid, 
 
.col-1-3, 
 
.col-2-3 { 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
} 
 

 

 
/* 
 
    ============================== 
 
    Primary Header 
 
    ============================== 
 
*/ 
 

 
.logo { 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Rysh</title> 
 
    <link rel="stylesheet" href="Assets/stylesheets/main.css"> 
 
</head> 
 

 
<body> 
 
    <header class="container logo"> 
 
    <h1>Rysh</h1> 
 
    <nav> 
 
     <a href="shop.html">Shop</a> 
 
     <a href="about.html">About</a> 
 
    </nav> 
 
    </header> 
 
</body> 
 

 
</html>