css怎么让hr居中 |css3 文字上下跳动

方法一：
hr {
display: block;
margin: 0 auto;
border-style: solid;
border-width: 1px 0 0 0;
}
方法二：
hr {
width: 50%;
margin: 0 auto;
border-style: solid;
border-width: 1px 0 0 0;
}
方法三：
hr {
position: relative;
border-style: solid;
border-width: 1px 0 0 0;
}
hr::before {
content: "";
position: absolute;
top: 50%;
width: 100%;
height: 1px;
background-color: black;
}

在以上代码中，方法一和方法二都是利用margin:auto实现水平居中的，不同的是方法一设置了hr标签为块级元素，方法二设置了宽度，两种方式都可以实现hr标签的水平居中。

方法三则是利用伪元素:before来实现hr标签的水平居中，通过将hr标签设为relative定位，再将:before伪元素设为绝对定位，并将top属性设为50%，让伪元素的中心位置与hr标签的中心重合，最后设置伪元素的宽度为100%，高度为1px，从而实现hr标签的水平居中。