Why isn't this LESS mixin working?

1
votes
.v-centered (@height,@width) {
    width: @width;
    height: @height;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: (@height / 2)px 0 0 (@width / 2)px;
}

I am trying to make a LESS mixin for vertically centering things (the non-line-height way) -- and this LESS mixin isn't working. I have a feeling it has to do with my margin: (@height / 2)px 0 0 (@width / 2)px; line but I can't see where I'm going wrong in my syntax. Any help appreciated.

1
syntaxlessmixins

1 Answers

2
votes

It depends on how you're using it. Right now your code assumes the width and height are passed in without units, but your width and height properties don't also append a unit like your margin property.

Also, to correctly center you want to negate your margins.

.v-centered (@height, @width) {
    width: @width;
    height: @height;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -(@height / 2) 0 0 -(@width / 2);
}

DEMO