我有一个代码，<div class=total><div class =lef></div><div class=rig></div></div>现在我想在上面布局的中心显示数字键盘，该如何布局

要在上述代码的`<div class="total">`内部添加一个居中的数字键盘，你可以结合CSS Flexbox或Grid布局。这里我会提供一种基于Flexbox的方法：

首先，在你的CSS文件中设置`.total`的样式，使其成为一个Flex容器：

.total {
  display: flex;
  justify-content: center; /* 将内部元素水平居中 */
  align-items: center;   /* 将内部元素垂直居中 */
}

接下来，对`.lef`和`.rig`的样式进行适当的调整，如果它们需要与数字键盘共存，可以给它们一些空间或者设置为非Flex项目：

.lef, .rig {
  flex: none; /* 如果不需要伸缩，阻止它们影响Flex布局 */
  margin-right: 10px; /* 或者任何适合的间隔 */
}

/* 如果数字键盘需要独立占据一行，可以将它单独作为Flex项目 */
.keyboard {
  display: flex;
  flex-direction: column; /* 数字键盘通常是竖直方向 */
}

然后，你可以创建一个新的`<div>`用于包裹数字键盘，并赋予`.keyboard`类：

<div class="total">
  <div class="lef">...</div>
  <div class="rig">...</div>
  <div class="keyboard">
    <!-- 数字键盘的HTML代码放在这里 -->
  </div>
</div>

这样，无论`<div class="total">`的宽度如何变化，数字键盘都会始终居于其中心位置。

如果你想要键盘在屏幕中心而不是总容器中心，可以将`.total`的`position`设置为`relative`，然后使用`calc()`函数计算偏移量，比如：

.total {
  position: relative;
  width: 100%; /* 或者设置一个具体的宽度 */
  ...
}

.keyboard {
  position: absolute;
  top: calc(50% - ...); /* 根据键盘高度计算顶部偏移 */
  left: calc(50% - ...); /* 同理计算左边距 */
  ...
}

请替换`...`为实际的高度值，并记得在键盘元素上覆盖合适的样式。