如何在不牺牲宽度的情况下使内容在此容器中居中

Question

如何在不牺牲宽度的情况下使内容在此容器内居中。我可以减小宽度并做边距：0自动，但是那不是我想要的。

当前，表单看起来不在中间，而是向左对齐。从第一个字符到图像的末尾，表单应该显示在页面中央，这正是我要尝试的。 https://jsfiddle.net/yj4zh297/

fetchImages(page) {
const { filters } = this.state;
this.setState({ loadingFetchImages: true });
const { headers } = getAxiosConfig();
axios.get(`${API_URL}/api/imagens_selecionadas`, { params: { page, q: 
filters }, headers })
.then((response) => {
  const images = response.data.objects.map(image => ({ ...image, check: 
 false }));
  this.setState({ images, loadingFetchImages: false });
  })
.catch(handleRequestError);

Answer 1

您可以设置宽度：100％；最大宽度：800px；到容器流体。 并添加margin-left：auto; margin-right：auto;