带.border类的div无法居中，text-align仅生效于内部元素的问题

问题根源 #

你用的text-align: center只对行内/行内块元素生效，而.border是块级div，它默认会撑满父容器的可用宽度（除自身margin外），所以只会让内部的<p>标签居中，div本身不会产生位移。

实用解决方案 #

方案1：给div设置左右自动外边距（最直接省心）

直接修改.border类的margin属性，让左右边距自动分配，就能实现水平居中：

.border {
    width: 400px;
    border-width: 5px;
    border-style: solid;
    border-color: #fef9bb;
    border-radius: 15px;
    padding: 5px;
    /* 上下保留15px边距，左右自动居中 */
    margin: 15px auto;
}

这种方式不需要依赖外部的<centre>标签，div自身就能居中；如果需要内部元素也居中，给.border加text-align: center即可。

方案2：用Flex布局改造自定义标签（适配复杂布局）

自定义标签默认是行内元素，先转为块级，再用Flex布局实现子元素居中：

centre {
    display: block; /* 自定义标签默认是inline，转为块级容器 */
    display: flex;
    justify-content: center; /* 水平居中子元素 */
    /* 如果需要垂直居中，可添加 align-items: center; 同时给容器设置高度，比如 height: 100vh; */
}

这种方式不管子元素是块级还是行内都能居中，后续布局调整更灵活。注意：HTML标准里没有<centre>标签，建议用<div class="centre-container">替代，避免兼容性问题。

方案3：将div转为行内块元素（不推荐，仅作参考）

把div改成行内块元素，让text-align: center能作用于它，但这种方式会受换行空格影响，且宽度会依赖内容（除非固定宽度）：

centre {
    text-align: center;
    display: block; /* 确保父容器占满宽度 */
}
.border {
    /* 原样式保留 */
    display: inline-block;
}

总结 #

优先选方案1（margin:auto），简单高效；如果需要更复杂的布局（比如同时垂直居中），选方案2（Flex布局）。

内容的提问来源于stack exchange，提问作者Francis