Html 如何将此代码居中？

请帮助我将下面的代码居中，并告诉我您是如何做到这一点的：

div.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.iframe:hover {
    border: 1px solid #777;
}

div.img iframe {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

---

< P>如果你想很容易地水平地排列这些元素，你可以考虑取你的最外层的代码<代码> <代码>元素，为它定义一个明确的宽度，并使用<代码>空白：0个Auto/<代码>在页面内的中心位置：

<div id='wrapper'>
     <!-- Your Content Here -->
</div>

示例

您可以在下面查看输出的内容：

---

如果要将视频居中，必须使用

文本对齐：居中，但这不适用于浮动元素。移除
浮动：左侧并将其替换为
display:inline block
。看起来是这样的：

（新小提琴：）


div.img{
保证金：5px；
边框：1px实心#ccc；
显示：内联块；
宽度：180px；
}
div.iframe：悬停{
边框：1px实心#777；
}
div.img iframe{
宽度：100%；
高度：自动；
}
分区描述{
填充：15px；
文本对齐：居中；
}


在此处添加图像的描述
在此处添加图像的描述
在此处添加图像的描述
在此处添加图像的描述
在此处添加图像的描述
以何种方式（水平还是垂直）？请水平：）
#wrapper { 
     width: 800px;
     margin: 0 auto;
}