css使元素垂直水平居中以及修改组件库的样式

记录

1.在项目中遇到使用css让块元素 在父元素中垂直水平居中显示的方法

1、绝对定位+transform

position: absolute; 元素居中显示css
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)

2、绝对定位+margin

position: absolute; 
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;

2.经常在vue项目中使用element table 对于修改表格的样式同input框css记录 （less预编译）

.table-wrapper /deep/ .el-table--fit {
    padding: 0 0 10px 0;
    color: #0efacc;
}
.table-wrapper /deep/ .el-table,
.el-table__expanded-cell {
    background-color: rgba(0, 0, 0, 0.1);
    color: #0efacc;
}

.table-wrapper /deep/ .el-table tr {
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: #0efacc;
}
.table-wrapper /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
    background-color: rgba(0, 0, 0, 0.1);
    color: #0efacc;
}
.table-wrapper /deep/ .el-table th{
    background-color: rgba(0, 0, 0, 0.1)!important;
    color:#0efacc!important;
}
.el-table__row > td {
    border: none;
}
.el-table::before {
    height: 0px;
}
.padding{
     /deep/.el-input__inner {
        width: 170px;
        color:#0efacc;
        background-color: rgba(0, 0, 0, 0.1);
    }
}
.block{
    /deep/.el-input__inner {
        color:#0efacc;
        background-color: rgba(0, 0, 0, 0.1);
    }
}

.table-wrapper与.block、.padding是组件的父元素div,在修改封装的组件样式时 需要加入/deep/（less）或者>>>(css)