这个问题在这里已有答案:
我有一个div
标签,width
设置为800像素。当浏览器宽度大于800像素时,它不应该拉伸div
,但它应该将它带到页面的中间。
<body>
<div style="width:800px; margin:0 auto;">
centered content
</div>
</body>
将此类添加到要居中的div(应具有设置的宽度):
.marginAutoLR
{
margin-right:auto;
margin-left:auto;
}
或者,将余量添加到div类中,如下所示:
.divClass
{
width:300px;
margin-right:auto;
margin-left:auto;
}
使用CSS flex property:http://jsfiddle.net/cytr/j7SEa/6/show/
body { /* Centered */
display: box;
flex-align: center;
flex-pack: center;
}
Div在父级内部垂直和水平居中,而不固定内容大小
Here on this page是一个很好的概述,有几个解决方案,这里可以分享太多代码,但它显示了可能的...
我个人喜欢this solution与着名的变换翻译-50%技巧最多。它适用于元素的固定(%或px)和未定义的高度和宽度。 代码很简单:
HTML:
<div class="center"><div>
CSS:
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* for IE 9 */
-webkit-transform: translate(-50%, -50%); /* for Safari */
/* optional size in px or %: */
width: 100px;
height: 100px;
}
Here a fiddle表明它有效
旧代码中的一些其他预先存在的设置将阻止div页面居中L&R:
img
之类的其他类(比较旧的外部CSS打印格式控件)。div
类冲突。居中而不指定div宽度:
body {
text-align: center;
}
body * {
text-align: initial;
}
body div {
display: inline-block;
}
这就像<center>
标签那样,除了:
<h1>
的所有直接内联子元素(例如<center>
)也将定位到中心使用display:block
和justify-content
水平和垂直对齐align-items
div
https://developer.mozilla.org/de/docs/Web/CSS/justify-content
https://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 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>
所以,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
width
。如果已知内容的102px
,则需要将页面大小除以2,并从结果中减去内容的width
的一半:1200/2 - (102/2)= 549;
是的,我也看到这是CSS的格罗斯失败。
width
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;
}
“body”标签的“width:100%”仅用于示例。在实际项目中,您可以删除此属性。
使用以下代码将div框居中:
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;
}
.box-content{
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
width: 800px;
height: 100px;
background-color: green;
}
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>
这也适用于Internet Explorer,但自动边距不适用。
<div class="box-content">
</div>
.centered {
position: absolute;
display: inline-block;
left: -500px;
width: 1000px;
margin: 0 50%;
}
<parent>
<child>
</child>
</parent>
parent {
position: relative
}
child {
position: absolute,
left: 50%,
transform: translateX(-50%)
}
如果要更改垂直位置,请更改值250,您可以根据需要排列内容。无需给出宽度和其他参数。
如果您的中心内容深入其他div,那么只有保证金可以节省您的费用。没有其他的。我总是在不使用像<body>
<div style=" display: table; margin: 250 auto;">
In center
</div>
</body>
这样的框架时面对它。
就我而言,手机屏幕尺寸未知,这就是我的所作所为。
HTML
Bootstrap
CSS
<div class="loadingImg"></div>
JavaScript(在您需要显示此DIV之前)
.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;
}
$(".loadingImg").css("height",$(document).height());
$(".loadingImg").css("width",$(document).width());
$(".loadingImg").show();
/ *它将div带到中心* /
出于某种原因,以前的答案都没有对我有用。这对我有用,它也可以在浏览器中使用:
.middle {
margin:0 auto;
text-align: center;
}
通过这种方式,容器的内容将位于中间。
示例:假设容器宽度= 800px;
.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;
}
现代Flexbox解决方案是进入/从2015年开始的方式.justify-content: center
用于父元素,以将内容与其中心对齐。
HTML
<div class="container">
<div class="center">Center</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
}
.center {
width: 800px;
}
产量
.container {
display: flex;
justify-content: center;
}
.center {
width: 800px;
background: #5F85DB;
color: #fff;
font-weight: bold;
font-family: Tahoma;
}
<div class="container">
<div class="center">Centered div with left aligned text.</div>
</div>
height
指定为800像素,并希望当width
大于那时,div不会伸展...margin: auto;
属性。此外,您必须确保body
和html
元素没有任何边距或填充:html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
要使它在Internet Explorer 6中也能正常工作,您必须按如下方式执行此操作:
HTML
<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></div>
div {
display: table;
margin-right: auto;
margin-left: auto;
}
您也可以像这样使用它:
<div style="width: 60%; margin: 0px auto;">
Your contents here...
</div>
这可以通过柔性容器轻松实现。
.container{
width: 100%;
display: flex;
height: 100vh;
justify-content: center;
}
.item{
align-self: center;
}
只需在center
标记之后使用body
标记,并在center
结束之前结束body
标记:
<body>
<center>
... Your code here ...
</center>
</body>
这适用于我尝试过的所有浏览器。