css上下边框居中怎么弄

在CSS中，设置边框常常被用来增加元素的可视化效果。边框在一个元素内的定位也经常是一个问题。特别是当你需要居中显示上下边框时，可能会感到困惑。 下面是一些解决方法：

box-sizing: border-box;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
height: 50px;
line-height: 50px;
text-align: center; 

首先使用box-sizing属性，将box-sizing的值设置为border-box，这样可以确保元素的padding和border大小会被包含在元素宽度内，从而不会把它们考虑在内。然后使用border-top和border-bottom来添加上下边框，设置它们的宽度、样式和颜色。接着，设置元素的高度和行高，使其能够容纳上下边框，并使文本居中。

还有一种方式是使用伪元素来创建上下边框：

border: none;
position: relative;
height: 50px;
line-height: 50px;
text-align: center;
}

::before,
::after {
    content: "";
    position: absolute;
    width: 90%;
    border-top: 1px solid grey;
    top: 50%;
}

::before {
    left: 0;
}

::after {
    right: 0;
} 

在这个例子中，首先设置元素的border为none，接着设置其高度、行高和位置，使其垂直居中对齐。然后使用伪元素:before和:after，为元素创建上下边框。在:before元素中，把它的left值设为0，表示它左对齐。同理，在:after元素中，把它的right值设为0，表示它右对齐。这样就可以创建一个上下边框居中的元素了。