Agi*_*Jon 1067
<body>
<div style="width:800px; margin:0 auto;">
centered content
</div>
</body>
小智 315
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>Man*_*mar 84
现代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>Tom*_*han 59
你的意思是你想要垂直或水平居中吗？你说你指定了height800px,并且希望div width在大于那个时不伸展...
要水平居中,您可以margin: auto;在css中使用该属性.此外,您必须确保body和html元素没有任何边距或填充:
html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
Kev*_*ngs 39
要使它在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;
}
小智 39
<div></div>
div {
display: table;
margin-right: auto;
margin-left: auto;
}
Raj*_*dev 28
您也可以像这样使用它:
<div style="width: 60%; margin: 0px auto;">
Your contents here...
</div>
小智 16
只需在身体标签之后使用中心标签,在身体结束之前使用终端中心标签
<body>
<center>
... Your code here ...
</center>
</body>
这适用于我尝试过的所有浏览器
Wil*_*ilt 16
div在父级内部垂直和水平居中，但不固定内容大小
此页面上的概述非常不错，其中包含几种解决方案，此处太多代码无法共享，但是它显示了可能的解决方案...
我个人最喜欢使用著名的转换转换-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;
}
小智 16
这可以通过柔性容器轻松实现.
.container{
width: 100%;
display: flex;
height: 100vh;
justify-content: center;
}
.item{
align-self: center;
}
Tay*_*own 13
将此类添加到要居中的div(应具有设置的宽度):
.marginAutoLR
{
margin-right:auto;
margin-left:auto;
}
或者,将余量添加到div类中,如下所示:
.divClass
{
width:300px;
margin-right:auto;
margin-left:auto;
}
小智 11
使用css flex属性:http://jsfiddle.net/cytr/j7SEa/6/show/
body { /* Centered */
display: box;
flex-align: center;
flex-pack: center;
}
小智 7
旧代码中的一些其他预先存在的设置将阻止div页面居中L&R:1)隐藏在外部样式表链接中的其他类.2)嵌入在诸如img之类的其他类(如旧的外部CSS打印格式控件).3)具有ID和/或CLASSES的图例代码将与命名的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。如果width知道内容的大小，则需要将页面大小除以2，然后width从结果中减去内容的一半：1200/2-（102/2）= 549;
是的，我也看到这是CSS的重大失败。
小智 6
居中而不指定div宽度:
body {
text-align: center;
}
body * {
text-align: initial;
}
body div {
display: inline-block;
}
这就像<center>标签一样,除了:
<h1>)也<center>将定位于中心display:block根据浏览器默认值,inline-block元素可以具有不同的大小(comapred to setting)使用以下代码将 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>小智 6
parent {
position: relative;
}
child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}<parent>
<child>
</child>
</parent>小智 5
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％”仅作为示例。在实际的项目中，您可以删除此属性。
小智 5
.middle {
margin:0 auto;
text-align: center;
}
/* 它使 div 居中 */
使用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>| 归档时间： |
|
| 查看次数： |
2442680 次 |
| 最近记录： |