Html 将特定宽度的边框图像元素居中（CSS）

我对CSS真的很陌生，只是随便玩玩。我在这里搜索了类似的问题，但没有找到我想要的

我在看W3，我想添加一个边框。这是我目前的代码：

<style>
    .center {
        text-align: center;
     }

    #borderimg2 { 
    border: 10px solid transparent;
    padding: 10px;
    border-image: url(https://www.w3schools.com/cssref/border.png) 35 stretch;
    }

</style>

 <div class="center">
 <p id="borderimg1" style="width: 200px"><font size="5"><b>Guides</b></font></p>
 </div>

问题是，当我添加width元素时，它会将所有包含文本的边框都拉到左侧。我想要的是所有内容都以边框图像为中心，而不是拉伸页面的整个宽度

如果这不合理，请告诉我；我可以添加图片

感谢您的帮助！另外，我假设我的代码是无组织的，所以任何关于组织或排序的一般提示都会有所帮助！谢谢

而不是

样式=宽度：200px

尝试使用填充-左填充和右填充

---

如果您不知道什么是填充或边距，请单击您在CSS中的id搞错了。除此之外，使用边距：0自动；在边界img1上，就这样

.中心{ 文本对齐：居中； } 边界img1{ 保证金：0自动； 边框：10px实心透明； 填充：10px； 边框图像：url'https://www.w3schools.com/cssref/border.png'35伸展； }

向导

---

若要以定义的宽度水平居中块元素，请添加左边距：自动；右边距：自动@MichaelCoker甚至更好，边际：0自动@JamesDouglas假设垂直边距应该是0，在大多数情况下，边距：像我的代码笔一样的自动是最短的。同意。我指的是你的评论。谢谢！！！！是的，我有两个borderimg，并试图简化我的问题的代码，但我错过了1/2！我也很困惑为什么玛金：0自动；没用，但我知道了哈哈！