如何将<div>对齐到页面的中间（水平/宽度）

我有一个div标签，width设置为800像素。当浏览器宽度大于800像素时，它不应该拉伸div，但它应该把它带到页面的中间。

3082596 次浏览
小开

  1. 您的意思是要垂直或水平居中吗？您说您指定了height到800像素，并且希望div在width大于800像素时不拉伸…

  2. 要水平居中，您可以使用CSS中的margin: auto;属性。此外，您必须确保body和html元素没有任何边距或填充：

html, body { margin: 0; padding: 0; }#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
小开
最佳答案 
<body><div style="width:800px; margin:0 auto;">centered content</div></body>
小开

要使其在Internet Explorer 6中正常工作，您必须执行以下操作：

超文本标记语言

<body><div class="centered">centered content</div></body>

css

body {margin: 0;padding: 0;text-align: center; /* !!! */}
.centered {margin: 0 auto;text-align: left;width: 800px;}
小开

如果你有一些常规的内容，而不是只有一行文本，我知道的唯一可能的原因是计算保证金。

下面是一个例子：

超文本标记语言

<div id="supercontainer"><div id="middlecontainer"><div class="common" id="first">first</div><div id="container"><div class="common" id="second">second</div><div class="common" id="third">third</div></div></div></div>

css

body {margin: 0;padding: 0;}
.common {border: 1px solid black;}
#supercontainer {width: 1200px;background: aqua;float: left;}
#middlecontainer {float: left;width: 104px;margin: 0 549px;}
#container {float: left;}
#first {background: red;height: 102px;width: 50px;float: left;}
#second {background: green;height: 50px;width: 50px;}
#third {background: yellow;height: 50px;width: 50px;}

所以，#supercontainer是你的"whole page"，它的width是1200px。

#middlecontainer是您网站内容的div；它是width102px。如果已知内容的width，您需要将页面的大小除以2，并从结果中减去内容width的一半：1200/2-（102/2）=549；

是的，我也看到这是CSS的总失败。

小开

这也适用于Internet Explorer，但自动边距不适用。

.centered {position: absolute;display:  inline-block;left:     -500px;width:    1000px;margin:   0 50%;}
小开

只需在body标记之后使用center标记，并在body结束之前结束center标记：

<body><center>... Your code here ...</center></body>

这适用于我尝试过的所有浏览器。

小开

其他一些来自旧代码的预先存在的设置会阻止div页面居中L&R是：

  1. 隐藏在外部样式表链接中的其他类。
  2. 其他类嵌入在img之类的东西中（例如用于旧的外部CSS打印格式控件）。
  3. 带有ID和/或CLASSES的图例代码将与命名的div类冲突。
小开

position: absolute，然后top:50%和left:50%将上边缘放置在屏幕的垂直中心，左边缘放置在水平中心，然后将margin-top添加到div高度的负数，即-100将其在上面移动100，类似于margin-left。这使得div正好位于页面的中心。

#outPopUp {position: absolute;width: 300px;height: 200px;z-index: 15;top: 50%;left: 50%;margin: -100px 0 0 -150px;background: red;}
<div id="outPopUp"></div>

小开

你也可以像这样使用它：

<div style="width: 60%; margin: 0px auto;">Your contents here...</div>
小开 
<div></div>
div {display: table;margin-right: auto;margin-left: auto;}
小开

使用CSS flex属性：http://jsfiddle.net/cytr/j7SEa/6/show/

body {                       /* Centered */display: box;flex-align: center;flex-pack: center;}
小开

Div在父级内部垂直和水平居中，而不固定内容大小

在这个页面上是一个很好的概述，有几个解决方案，这里分享的代码太多了，但它展示了什么是可能的…

就个人而言，我最喜欢此解决方案与著名的转换翻译-50%技巧。它适用于元素的固定（%或px）和未定义的高度和宽度。
代码非常简单：

超文本标记语言：

<div class="center"><div>

css：

.center {position: absolute;left: 50%;top: 50%;-moz-transform: translate(-50%, -50%); /* Firefox */-ms-transform: translate(-50%, -50%);  /* IE 9 */-webkit-transform: translate(-50%, -50%); /* Safari and Chrome*/-o-transform: translate(-50%, -50%); /* Opera */transform: translate(-50%, -50%);
/* optional size in px or %: */width: 100px;height: 100px;}

这里有一个小提琴表示它有效

小开 
body, html {display: table;height: 100%;width: 100%;}.container {display: table-cell;vertical-align: middle;}.container .box {width: 100px;height: 100px;background: red;margin: 0 auto;}

http://jsfiddle.net/NPV2E/

“body”标签的“宽度：100%”仅用于示例。在实际项目中，您可以删除此属性。

小开

在不指定div宽度的情况下居中：

body {text-align: center;}
body * {text-align: initial;}
body div {display: inline-block;}

这类似于<center>标签，除了：

  • <center>的所有直接内联的Childs元素（例如<h1>）也将定位到中心
  • inline-block元素可以根据浏览器默认值具有不同的大小（对应于display:block设置）
小开

将此类添加到您想要居中的div（应该有设置的宽度）：

.marginAutoLR{margin-right:auto;margin-left:auto;}

或者，将边距内容添加到您的div类中，如下所示：

.divClass{width:300px;margin-right:auto;margin-left:auto;}
小开 
<body><div style=" display: table; margin: 250 auto;">In center</div></body>

如果你想改变垂直位置，改变250的值，你可以根据你的需要安排内容。不需要给出宽度和其他参数。

小开

简单http://jsfiddle.net/8pd4qx5r/

html {display: table;height: 100%;width: 100%;}
body {display: table-cell;vertical-align: middle;}
.content {margin: 0 auto;width: 260px;text-align: center;background: pink;}
小开 
.middle {margin:0 auto;text-align: center;}

/*它将div带到中心*/

小开

Flex box解决方案是进入/从2015年开始的方式。justify-content: center用于父元素将内容对齐到它的中心。

超文本标记语言

<div class="container"><div class="center">Center</div></div>

css

.container {display: flex;justify-content: center;}

产出

.container {display: flex;justify-content: center;}.center {width: 400px;padding: 10px;background: #5F85DB;color: #fff;font-weight: bold;font-family: Tahoma;}
<div class="container"><div class="center">Centered div with left aligned text.</div></div>

小开

出于某种原因，之前的答案都不适合我。这是对我有用的，它也适用于浏览器：

.center {text-align: center;height: 100%;
/* Safari, Opera, and Chrome */display: -webkit-box;-webkit-box-pack: center;-webkit-box-align: center;
/* Firefox */display: -moz-box;-moz-box-pack: center;-moz-box-align: center;
/* Internet Explorer 10 */display: -ms-flexbox;-ms-flex-pack: center;-ms-flex-align: center;}
小开

如果你的中心内容深入到其他div中，那么只有边距可以拯救你。没有别的了。当不使用像Bootstrap这样的框架时，我总是面对它。

小开

使用justify-content和align-items水平和垂直对齐div

https://developer.mozilla.org/de/docs/Web/CSS/justify-contenthttps://developer.mozilla.org/en/docs/Web/CSS/align-items

html,body,.container {height: 100%;width: 100%;}.container {display: flex;align-items: center;justify-content: center;}.mydiv {width: 80px;}
<div class="container"><div class="mydiv">h & v aligned</div></div>

小开

使用下面的代码将div框居中：

.box-content{margin: auto;top: 0;right: 0;bottom: 0;left: 0;position: absolute;width: 800px;height: 100px;background-color: green;}
<div class="box-content"></div>

小开

这可以通过flex容器轻松实现。

.container{width: 100%;display: flex;height: 100vh;justify-content: center;}
.item{align-self: center;}

预览链接

小开

在我的情况下，手机屏幕尺寸是未知的，这就是我所做的。

超文本标记语言

<div class="loadingImg"></div>

css

.loadingImg{position: fixed;top: 0px;left: 0px;z-index: 9999999;border: 0;background: url('../images/loading.gif') no-repeat center;background-size: 50px 50px;display: block;margin: 0 auto;-webkit-border-radius: 50px;border-radius: 50px;}

javascript（在您需要显示此DIV之前）

$(".loadingImg").css("height",$(document).height());$(".loadingImg").css("width",$(document).width());$(".loadingImg").show();
小开
  • 获取屏幕的宽度。
  • 剩下25%的保证金
  • 右转25%

这样，容器的内容就会放在中间。

示例：假设容器宽度=800px；

<div class='container' width='device-width' id='updatedContent'><p id='myContent'></p><contents></contents><contents></contents></div>
if ($("#myContent").parent === $("updatedContent")){$("#myContent").css({'left': '-(device-width/0.25)px';'right': '-(device-width/0.225)px';});}
小开 

parent {position: relative;}child {position: absolute;left: 50%;transform: translateX(-50%);}
<parent><child></child></parent>


提交答案