html - 将三个div居中对齐

刚开始时不太擅长，但我只是不能将这些div居中，可以有人帮助：/我看过网上，但没有找到任何适合的方法...我只有12岁，对我来说这都是很新的。

*{
    margin: 0px;
    padding: 0px;
}
#Title{
    height:75px;
    width:60%;
    margin-top:5%;
    background-color:black;
    display: table;
    margin-left: auto ;
    margin-right: auto ;
}
#Wallpaper{
    width:15%;
    height:250px;
    background-color:black;
    display: inline-block;
    margin-top:5%;
    margin-left: auto ;
    margin-right: auto ;
    float:center;
}
#Logo{
    width:15%;
    height:250px;
    background-color:black;
    display: inline-block;
    margin-top:5%;
    margin-left: auto ;
    margin-right: auto ;
    float:center;
}
#YoutubeBanner{
    width:15%;
    height:250px;
    background-color:black;
    display: inline-block;
    margin-top:5%;
    margin-left: auto ;
    margin-right: auto ;
    float:center;
}

最佳答案

这是一种实现方法，它反应灵敏且流畅。

演示：https://jsbin.com/puhixo/1/

的CSS

body,
html {
    margin: 0;
    padding: 0;
    background: #fff;
    font: 1em/1.5 sans-serif;
}
.row,
.column {
    box-sizing: border-box /*so padding and borders are included in width */
}
.row {
    word-spacing: -1em; /* fix the inline block extra space issue */
    letter-spacing: -1em; /* fix the inline block extra space issue */
    overflow: hidden;
    text-align: center;
    padding: 0 20px;
    width: 100%;
    max-width: 1200px;
    margin:0 auto;
}
.column {
    vertical-align: top;
    word-spacing: normal; /* reset child */
    letter-spacing: normal; /* reset child */
    display: inline-block;
    border: 1px solid red;
    width: 100%; /* the size UNDER the min-width in the media query*/
    padding: 10px;
    text-align: left; /* reset child */
}
@media (min-width:500px) {
    .column {
        width: 33.333%;
        max-width: 250px; /* the max-width */
    }
}

HTML：

<div class="row">
   <div class="column">
      Column 1 text goes here. Text goes here for column 1.
   </div>
   <!--/.column -->
   <div class="column">
      Column 2 text goes here. Text goes here for column 1.
   </div>
   <!--/.column -->
   <div class="column">
      Column 3 text goes here. Text goes here for column 1.
   </div>
   <!--/.column -->
</div>
<!--/.row -->