无法使用css将三个div居中

我想水平居中三个图像

.music {
width: 200px;
height: 200px;
background-image: url('image/music1.png');
margin: 0 auto;
display: inline-block;
cursor: pointer;
}

.music2 {
width: 200px;
height: 200px;
background-image: url('image/music2.png');
margin: 0 auto;
display: inline-block;
cursor: pointer;
}

.music3 {
width: 200px;
height: 200px;
background-image: url('image/music3.png');
margin: 0 auto;
display: inline-block;
cursor: pointer;
}

.main_content {
height: auto;
margin: auto;
width:100%;
background-color:#b0e0e6;
}

还有显而易见的html

 <div class="main_content">
    <a href="documents.php"><div class="documents"></div></a>
    <a href="music"><div class="music"></div></a>
    <a href="photos"><div class="photos"></div></a>
</div>

---

css将所有内容保持在左侧，而不是居中。我做错了什么？

margin:0 auto

仅将具有定义宽度的块级元素居中（如

，
，或内联元素-如
，带
显示：块
）

如果要将
内联块
元素居中，则必须在其父元素上使用
文本对齐：居中。
类名称似乎不匹配；当前“music2”和“music3”没有要应用的HTML元素

将“music2”和“music3”更改为“文档”和“照片”，然后所有3个div将水平对齐。
.main\u content{text align:center；}