我有一个div
标签,width
设置为800像素。当浏览器的宽度大于800像素时,它不应该拉伸div
,但它应该把它带到页面的中间。
position: 然后 "top:50%"和 "left:50%"把上边放在屏幕的垂直中心,左边放在水平中心,然后把 "margin-top "加到div高度的负值上,即-100,把它移到100以上,同样把 "margin-left "也移到100以上。 这样就可以使
div`准确地位于页面的中心。
<!--开始片段。 js hide: false console.true babel: true true babel.false --> -- begin snippet: js hide: false console: true false -->
#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>
<!--结束片段-->
现代Flexbox解决方案是2015年/从2015年开始的方向。
justify-content: center
](https://css-tricks.com/almanac/properties/j/justify-content/)用于父元素,将内容对齐到它的中心。
HTML
<div class="container">
<div class="center">Center</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
}
.center {
width: 800px;
}
产出
<!--开始片段。 js hide.true --> -- begin snippet: js hide: true -->
.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>
<!--结束片段-->
1.你的意思是你想让它在垂直方向还是水平方向居中?你说你将 "高度 "指定为800像素,并希望当 "宽度 "大于该值时,DIV不被拉伸......
2.要水平居中,你可以使用CSS中的margin: auto;
属性。另外,你必须确保body
和html
元素没有任何边距或填充。
html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
Div在母体内垂直和水平居中,不固定内容大小。
[本页][1]是一个很好的概述,有几个解决方案,太多的代码在这里分享,但它显示了什么是可能的...。
我个人最喜欢[这个解决方案][2]和著名的transform translate -50%技巧。 它对你的元素的固定(%或px)和未定义的高度和宽度都有很好的效果.<br>。 代码就这么简单。
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;
}
[这里有一个小提琴][3],说明它是有效的。
[1]: https://douglasheriot.com/tutorials/css_vertical_centre/demo4.html [2]: https://css-tricks.com/centering-percentage-widthheight-elements/ [3]:
使用[CSS flex属性][1]。
body { /* Centered */
display: box;
flex-align: center;
flex-pack: center;
}
其他一些旧代码中预先存在的设置会阻止div页面居中L&R是。
其他嵌入在img
之类的类中的类(如旧的外部CSS打印格式控件)。
3.带有ID和/或CLASSES的图例代码将与命名的div
类冲突。
在不指定div宽度的情况下居中。
body {
text-align: center;
}
body * {
text-align: initial;
}
body div {
display: inline-block;
}
这就像<center>
标签所做的一样,除了。
<center>
标签的所有直接内联子元素(例如
<center>
的所有直接内联子元素(比如<h1>
)也会被定位到中心位置。如果你有一些常规的内容,而不是只有一行文字,我知道的唯一可能的原因是计算margin。
下面是一个例子。
<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 "就是你的""整页"",它的 "width "是 "1200px"。
#middlecontainer
是你的网站内容的div,它的
width是
1200px。 它的
宽度102px
。
如果知道内容的宽度
,则需要将页面的大小除以2,然后从结果中减去内容宽度
的一半。
1200 / 2 - (102 / 2) = 549;
是的,我也看到了这是CSS的*大失败。
使用 "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
<!--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->
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>
<!--结束片段-->
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;
}
"宽度:100%"。 的"body"。 标签只是一个例子。 在真正的项目中,你可以删除这个属性。
使用下面的代码对div框进行居中处理。
<!--开始snippet。 js hide: false console: true babel: false -->
.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>
<!--结束片段-->