The element ui form is displayed horizontally and vertically.

when working on a project, there is a form that needs to be displayed in the center of the page, but I set margin:0 auto does not work, width does not work, text-align:center does not work, vertical-align: middle does not work, is there any other way (I wrapped a div tag on the form and then set class, to center the class but did not respond)

Apr.09,2021

set cell-style, data to single row, use line-height, for multiple rows, use padding


1. You have to see which dom node the css is written to, and whether the parent container affects it.
2. Do not know your code, guess that it is possible that the modified style of elementui has not been successfully introduced, add / deep/ or > before the selector.


elementui modify default style
< style rel= "stylesheet/scss" lang= "scss" scoped >
@ import 'src/assets/css/common.scss'
< / style >
modify element without adding soped, but when you don't add scoped attribute, the styles of pages will affect each other. At this time, add a parent class to the root node to control the different styles of different pages
for example, when an index.vue page is introduced into common.scss to modify the style of el-col, add a parent class
.index. El-col {

.

} so that the style of other pages will not be affected


   

in fact, it can be centered vertically and horizontally

Menu