css边框居中

CSS 边框居中基础概念

CSS 边框居中是指将元素的边框在页面上居中显示。这通常涉及到水平居中和垂直居中两个方面。

类型

水平居中：将元素的边框在水平方向上居中。
垂直居中：将元素的边框在垂直方向上居中。
完全居中：同时实现水平和垂直居中。

应用场景

导航栏：在网站的顶部导航栏中使用居中的边框，可以使导航栏更加显眼。
标题：在页面的标题部分使用居中的边框，可以突出标题的重要性。
表单：在表单的输入框或按钮周围使用居中的边框，可以提高用户体验。

示例代码

水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Centered Border</title>
    <style>
        .centered-border {
            border: 2px solid black;
            text-align: center;
            width: 200px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="centered-border">水平居中的边框</div>
</body>
</html>

垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Centered Border</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .centered-border {
            border: 2px solid black;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="centered-border">垂直居中的边框</div>
    </div>
</body>
</html>

完全居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fully Centered Border</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .centered-border {
            border: 2px solid black;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="centered-border">完全居中的边框</div>
    </div>
</body>
</html>

参考链接

常见问题及解决方法

问题：为什么边框没有居中？

原因：

容器宽度未设置：如果容器的宽度没有设置，元素可能会根据内容自动调整宽度，导致无法居中。
margin 属性未正确使用：margin: 0 auto; 只对块级元素有效，且元素的宽度必须明确设置。

解决方法：确保容器有明确的宽度，并且使用 margin: 0 auto; 来实现水平居中。

.container {
    width: 300px;
    margin: 0 auto;
}

问题：垂直居中为什么不起作用？

原因：

容器高度未设置：如果容器的高度没有设置，垂直居中可能无法生效。
Flexbox 布局未正确使用：在使用 Flexbox 布局时，需要确保父容器设置了 display: flex;，并且使用了 justify-content 和 align-items 属性。

解决方法：确保容器有明确的高度，并且正确使用 Flexbox 布局。

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

通过以上方法，可以有效地解决 CSS 边框居中的常见问题。

页面内容是否对你有帮助？

有帮助

没帮助

为什么我的CSS边框会移到页面的末尾？

、、、

我一直在用codecademy学习HTML/CSS，我的CSS边框有这个问题。我需要我的h1以边框居中，但我不希望边框延伸到页面的末尾。border-style:ridge; border-width:5px; text-align:center;">HTML Testing Page</h1> 我计划很快制作一个单独的样式表，我只是将CSS这个边框位于页面的末尾，如果我放入display:inline或

浏览 4提问于2012-09-17得票数 2

回答已采纳

2回答

如何使用CSS水平对元素进行居中？

使用CSS对元素进行水平居中的每一个例子都说明了将margin-left和margin-right设置为auto。我在CSS方面不是很有经验，所以我想知道是否有理由同时设置这些属性，而不是仅仅将其中一个设置为50%？会有副作用吗？

浏览 3提问于2015-01-27得票数 0

回答已采纳

1回答

以边距居中的元素上的负边距边框:0 auto；

、

我有一个固定宽度的页面，我希望使用“边框CSS”命令为其添加一个简单的边框。但是，我不希望这个边框使页面膨胀，并导致较小的屏幕具有水平滚动条。我对CSS不是很在行，但我知道我考虑过使用负边距来抵消边框的宽度，因为我已经做了一些类似的操作，为我不想移动的其他元素添加边框。我使用的是Blueprint CSS框架，我发现里面有什么东西弄乱了我的页边距，我发现主容器应用了一个“边距:0自动；”来使它在页面上居中。所以，我现在问，我怎么能在页

浏览 3提问于2011-01-29得票数 2

回答已采纳

5回答

HTML5用CSS替换块div中的"center“？

、

验证器抱怨标签的每次使用，并建议我使用CSS。不幸的是，CSS似乎不能将块水平居中。它可以使用' text -align: center‘属性将文本居中，但尝试居中表格和图像会失败。我在上读过"CSS居中指南“，但它的所有示例都不能水平居中表格或图像(至少在Firefox36.0上是这样)。谁能建议一下如何使这张桌子居中？<html> <head>

浏览 1提问于2015-04-02得票数 2

1回答

包含图像和边框的两列列表-旋转边框，而不是图像。

、、、

在鼠标上方，应旋转边框。但在我的例子中，标志会旋转到。此外，徽标不是垂直居中的。提前感谢也许你可以向我展示一下这个例子的改进。因为我不是HTML/CSS方面的专家。

浏览 3提问于2013-08-23得票数 1

回答已采纳

2回答

css:按块裁剪的图像。在可见区域周围绘制边框。重要问题

、、

问题：2.绘制图像可见部分的边界。请注意，边框可以匹配外部div边框或图像边框。2a.clarification：我想找到(例如)创建第三个div的方法，它的边界将重复图像的可视部分的边框。裁剪或不裁剪，必须在浏览器中看到图像可见部分的边框。

浏览 2提问于2011-02-11得票数 0

回答已采纳

1回答

Richfaces皮肤覆盖Styleclass

、、、

org.richfaces.control_skinning_classes</param-name></context-param><h:outputStylesheet name="jsp-css.css" library="css" />.obsOpt

浏览 3提问于2011-09-08得票数 11

回答已采纳

1回答

Javafx CSS:使用css绘制文本

有没有一种像这样用css编码的方法？透明填充，蓝色笔触边框，文本居中。对不起，我的英语不好。

浏览 14提问于2018-08-08得票数 0

1回答

使用按百分比填充的边框大小的定位问题

我有问题对齐我的div与框的大小:边框当我开始使用填充百分比，框的位置将不匹配的位置百分比。<!DOCTYPE html><head> <style type="text/css" media="screen">这是一个bug，还是我错误地理解了边框的概念，边框将

浏览 0提问于2012-09-20得票数 2

4回答

自定义CSS边框样式(这很棘手！)

、

我有一个棘手的CSS边框，我想样式化。基本上我想为div实现这个边框效果，其中div的高度是10px，有一个1px的实心绿色边框，但是右边的边框有一个4px的实心红色覆盖，它是垂直居中的，只有5px高。

浏览 0提问于2013-08-20得票数 0

3回答

表格边框底部的间距

、

我有一个表格，我正在使用css来显示底部边框。是否有我应该查看的属性，或者我应该研究的CSS技巧，以使表格保持完好，并能够看到居中但仅占表格宽度80%的底部边框？

浏览 1提问于2018-11-14得票数 0

1回答

在页面处于活动状态时显示a:after

、、

我有这个css的。这是它的css。

浏览 0提问于2015-05-20得票数 1

2回答

我可以重叠CSS边框吗？尝试从页面边缘到文本末尾加下划线

、、

我尝试将标题居中(宽度可变)，并使下划线从页面的左侧边缘延伸到文本的末尾。除非我遗漏了什么，否则似乎没有一种简单的方法可以做到这一点！我最接近我想要的是：margin-right: 50%;} 这样，文本居中，边框用作下划线，wrapper1

浏览 3提问于2010-03-08得票数 2

回答已采纳

1回答

如何更改单选按钮的颜色

、

可以通过CSS改变单选按钮的背景颜色吗？我在互联网上看了看，但我只在JS中找到了解决方案，我不一定理解它们。

浏览 3提问于2017-07-26得票数 2

回答已采纳

3回答

居中div的最小左边距

、、、

有没有一种"css“方法可以让居中的div表现得好像有最小的左边距？我希望一个居中的div在页面上居中，除非该页面的宽度小于某个特定值。我认为灰色边框是浏览器，蓝色框是我的“居中”div。 📷 📷

浏览 4提问于2013-10-03得票数 2

3回答

如何在虚线边框内水平和垂直居中文本

、

我需要将一些文本在虚线边框之间垂直和水平居中，如下图所示：我有一个，它试图实现这一点。如何修改css以使其显示为附加屏幕截图？

浏览 5提问于2012-07-25得票数 1

回答已采纳

2回答

规则“-fx-text-doesn”不起作用吗？

、、

下面是css代码：{ -fx-text-alignment: center; -fx-effect

浏览 7提问于2015-05-19得票数 4

回答已采纳

4回答

文本对齐:居中不影响显示: inline-block

、、

我在我的网站上有一个副标题，我想在标题下居中。然而，我也想给副标题一个下边框。我希望边框的长度等于字幕的长度，所以我想我应该显示: inline-block和text-align: center。然后，通过底部边框进行应用。然而，它不起作用。副标题保持左对齐。我在下面附上了我的HTML和CSS：

浏览 5提问于2012-07-26得票数 1

回答已采纳

3回答