在前端开发中，我们经常会使用label进行表单元素的描述，但label默认的显示方式可能会有些不符合我们的需求，比如说居中显示。下面是通过使用jQuery实现label居中显示的方法。
<style>label {
position: absolute; /*设置为绝对定位*/
left: 50%; /*水平居中*/
top: 50%; /*垂直居中*/
transform: translate(-50%,-50%); /*移动自身宽高的一半*/
}
</style><body><div><label>name</label><input type="text"></div></body><script>$(function() {
$('label').css({
'margin-left': -$('label').outerWidth() / 2, //减去自身宽度的一半
'margin-top': - $('label').outerHeight() / 2 //减去自身高度的一半
});
});
</script> 在上面的代码中，我们首先给label设置了绝对定位，然后通过设置left和top属性使其水平和垂直居中，最后通过transform属性移动label自身宽高的一半，使其完全居中。但这样label的位置是相对于父元素而言的，而不是相对于表单元素，所以我们要在JS中再加上margin的计算，将label的位置调整到正确的位置。
通过上面的代码，我们就能够实现label的居中显示了。如果有多个表单元素，我们只需要将代码套用到每个label上，同时根据需要适当地调整样式即可。
查看更多关于jquery label居中显示的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did248324