CSS：调整大小时将内容居中

Question

我的内容区域以 margin:0 auto 为中心，width 为 1280px。当我调整浏览器 window 大小时，如果浏览器 width 低于 1280px，则只有右侧的内容会被截断。有没有一种方法可以使整个网站始终居中，以便内容区域左右均分？

Answer 1

您可能需要考虑使用@media 等媒体查询进行响应式设计。

如果内容是图片，可以考虑做背景，设置{background-position: center}

Answer 2

您可以尝试使用媒体查询，您可以在其中居中固定宽度 div，例如

http://codepen.io/anon/pen/RNqXGW

div {
  background: #d8d8d8;
  text-align: center;
  width: 1280px;
  margin: 0 auto;
}

@media all and (max-width: 1280px) {
   main { 
       /* hide horizontal scrollbar */
       overflow: hidden; 
   }
   div {
       /* these properties cut your div equally both
          on left and right side */
       margin-left: 50%;
       -webkit-transform: translateX(-640px);
       -moz-transform: translateX(-640px);
       transform: translateX(-640px);
   }  
}

Answer 3

如果您确实需要将内容width固定在1280px，您可以使用一些jQuery通过margin 属性 window.resize 事件：

$(this).resize(function(){
    var width =  $('#itemToKeepCentered').width();
    var windowWidth = $(this).width()
   $('#itemToKeepCentered').css('margin-left', (windowWidth-width)*0.5);
});

工作示例：https://jsfiddle.net/urahara/oq4uj9q7/2/

Note: @media css may be useful to you as well.

Answer 4

我找不到它对网页非常有用，但是是的.. 用很少的 jquery 你可以让你的容器在大于 window 宽度时位于中间。

并不是 "right side gets cut off "，而是在更大的内容 window 宽度开始滚动，默认情况下滚动条将始终位于左侧（如果垂直则为顶部）。

所以只需使用它来居中滚动：

$(function () {
    scrollTo(($(document).width() - $(window).width()) / 2, 0);
});

这里有一个fiddle

已编辑：无法使用手动调整大小...尝试调整大小然后重新加载页面

CSS：调整大小时将内容居中

CSS: center content on resize

html

css

centering