Center VWP components

There isn't any standard function in the Visual Web Pack to center components on the page. You can only use absolute or flow layout.

If you want center your components horizontally or vertically, you need CSS. This is done with the style setting of your component.

position: absolute;
left: 50%;
top: 50%;

This setting would center the left upper corner of your component on the page, but not the whole component. To center the whole component you must adjust the margins. The margins can be negative, so substract the half of the vertical and horizontal size from the corresponding margin. In this sample assume that the component has a height of 100 pixels and a width of 200 pixels.

position: absolute;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -100px;

Leave a comment