居中最大寬度的流體div

我想中心我的內容div。它設置爲100％，div包含在body中，也設置爲100％。我有一個最大寬度：1400px，因爲如果屏幕分辨率更高，我不希望我的內容伸展得更多。事情是，它不能使用margin：auto。我的內容位於左側，未超過1400像素的屏幕。居中最大寬度的流體div

如果我刪除的最大寬度，一切都完全集中在寬屏，但內容被拉伸到整個屏幕...

#content { 
width: 100%; 
height: auto; 
position: absolute; 
top: 400px; 
margin: 0 auto; 
margin-top: 50px; 
display: none; 
max-width: 1400px;

}

來源

2013-06-20 Xavier

最簡單的方式實現這一目標，將width屬性設置爲您需要的最大寬度，並添加max-width: 100%;。這將防止它大於100％，但仍然達到最大寬度。此外，您應該刪除absolute定位：

JS Fiddle

來源

2013-06-20 16:22:58

或者乾脆'保證金：0汽車;' – rybo111

使用Flexbox的...

將這個類的父元素（身體）：

的HTML

<body class="p-flexbox flex-hcc"> 
<!-- The content --> 
</body>

其中：

對Flexbox的裝置父 - Flexbox的
柔性HCC裝置Flexbox的-水平中心 - 中心

的CSS

.p-flexbox { 
    display: -webkit-box; 
    display: -moz-box; 
    display: box; 
} 

.flex-hcc { 

    -webkit-box-orient: horizontal; 
    -webkit-box-pack: center; 
    -webkit-box-align: center; 

    -moz-box-orient: horizontal; 
    -moz-box-pack: center; 
    -moz-box-align: center; 

    box-orient: horizontal; 
    box-pack: center; 
    box-align: center;

}

乾杯， Leonardo

來源

2013-06-20 16:23:21 leoMestizo

您可以使用transform技術，該技術不需要額外的標記或媒體查詢。

#content { 
    position: relative; /* 'fixed' will work also. */ 
    max-width: 500px; /* Your required width here. */ 
    width: 100%; 
    left: 50%; 
    transform: translateX(-50%); 
}

這裏有一個演示https://jsfiddle.net/matharden/6uduf7av/

來源

2016-09-27 16:04:10 matharden

居中最大寬度的流體div

回答

相關問題