html - 根据可用空间水平居中元素

Question

是否可以在不使用 javascript 的情况下将元素水平居中放置在所有可用空间上？

我知道如果我执行 margin: 0 auto; 它会在屏幕上居中。但是，因为我有侧边栏，所以我希望内容以剩余空间为中心，而不是屏幕空间。

我知道使用 javascript 很容易完成，但是我想知道我是否可以使用纯 css 来实现它。 ( https://jsfiddle.net/dxb2rr8k/ )

Javascript 代码看起来像这样 ( https://jsfiddle.net/a5n59bxn/ ):

$(window).on('resize', function () {
  centerContent();
});

function centerContent() {
  var sidebarWidth = $('.sidebar').width();
  var contentWidth = $('.content').width();
  var windowWidth = $(window).width();

  $('.content').css('margin-left', (windowWidth / 2) - sidebarWidth);
}

Answer 1

html, body, .wrap {
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

.sidebar {
  width: 100px;
  background: red;
  height: 100%;
  min-height: 100%;
  float: left;
}

.content {
  overflow: hidden;
  background: blue;
  margin: 0 auto;
  width: 300px;
}

<div class="wrap">
  <div class="sidebar"></div>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid eveniet, iure maiores optio provident quod illum deleniti saepe error corporis molestiae reiciendis omnis, sapiente perspiciatis dolore nesciunt unde, eligendi quisquam reprehenderit. Corporis accusamus beatae, quisquam voluptas deleniti, nam libero dolore, odio maiores blanditiis error sit ad earum iusto quia distinctio.
    </p>
  </div>
</div>