可以使用flexbox布局来实现保持页面中部的子元素约束不变的情况下调整大小。

HTML代码：

  
Sidebar
  
Content

CSS代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.sidebar {
  width: 200px;
  background-color: #f0f0f0;
}

.content {
  flex-grow: 1;
  background-color: #e0e0e0;
  margin: 0 10px;
}

在上面的示例中，.container使用flexbox布局，并通过justify-content: center和align-items: center来使子元素在中部对齐。.content的flex-grow: 1属性将其设置为可伸缩的，使其占据剩余的空间。.sidebar的宽度被设置为固定的200px，保持了约束不变。通过在.content的左右两侧添加margin来为其提供一个缩小的空间。

这样，当页面调整大小时，.content会根据可用空间自动调整大小，同时保持.sidebar的宽度不变。