This is how I've been doing it for some time
我想div用CSS垂直居中.我不想要表或JavaScript,只需要纯CSS.我找到了一些解决方案,但所有这些解决方案都缺少Internet Explorer 6支持.
Div to be aligned vertically
如何div在所有主流浏览器(包括Internet Explorer 6)中垂直居中？
下面是我可以构建的最佳全方位解决方案,可以垂直和水平居中固定宽度,灵活高度的内容盒.它已经过测试,适用于最新版本的Firefox,Opera,Chrome和Safari.
.outer {
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
/*whatever width you want*/
}
The Content
Once upon a midnight dreary...
我在列表中看不到一个:
.Center-Container {
position: relative;
height: 100%;
}
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
border: solid black;
}
跨浏览器(包括Internet Explorer 8 - 没有黑客的Internet Explorer 10!)
响应百分比和最小/最大 -
无论填充是否居中(没有盒子大小!)
height必须声明(见变量高度)
建议的设置overflow: auto以防止内容溢出(请参阅溢出)
来源:CSS中的绝对水平和垂直居中
最简单的方法是以下3行 CSS:
div.outer-div {
height: 170px;
width: 300px;
background-color: lightgray;
}
div.middle-div {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}以下是一个例子:
Test text
div.outer-div {
height: 170px;
width: 300px;
background-color: lightgray;
}
div.middle-div {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}实际上你需要两个div用于垂直居中.包含内容的div必须具有宽度和高度.
#container {
position: absolute;
top: 50%;
margin-top: -200px;
/* half of #content height*/
left: 0;
width: 100%;
}
#content {
width: 624px;
margin-left: auto;
margin-right: auto;
height: 395px;
border: 1px solid #000000;
}
Centered div
现在,flexbox解决方案对于现代浏览器来说是一种非常简单的方法,因此我建议您使用:
.container{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background:green;
}
body, html{
height:100%;
}
Div to be aligned vertically
这是我找到的最简单的方法,我一直都在使用它(这里是jsFiddle演示)
感谢CSS Tricks的Chris Coyier 撰写本文.
html, body{
height: 100%;
margin: 0;
}
.v-wrap{
height: 100%;
white-space: nowrap;
text-align: center;
}
.v-wrap:before{
content: "";
display: inline-block;
vertical-align: middle;
width: 0;
/* adjust for white space between pseudo element and next sibling */
margin-right: -.25em;
/* stretch line height */
height: 100%;
}
.v-box{
display: inline-block;
vertical-align: middle;
white-space: normal;
}
This is how I've been doing it for some time
经过大量的研究,我终于找到了最终的解决方案.它甚至适用于浮动元素.查看来源
.element {
position: relative;
top: 50%;
transform: translateY(-50%); /* or try 50% */
}
要将div置于页面中心,请检查小提琴链接.
#vh {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.box{
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
padding: 25px;
width: 100px;
height: 100px;
background: white;
}Div to be aligned vertically注释
1.父元素被赋予类名.
2.如果您的支持的浏览器需要,请添加flex供应商前缀.
.verticallyCenter {
display: flex;
align-items: center;
}
Element centered vertically
不幸的是 - 但并不奇怪 - 解决方案比人们希望的更复杂.还不幸的是,你需要在想要垂直居中的div周围使用额外的div.
对于符合标准的浏览器,如Mozilla,Opera,Safari等,您需要将外部div设置为表格,将内部div设置为表格单元格 - 然后可以垂直居中.对于Internet Explorer,需要放置内的div 绝对内部的外层div,然后指定顶为50% .以下几页很好地解释了这种技术并提供了一些代码示例:
CSS中的垂直居中
CSS中具有未知高度的垂直居中(兼容Internet Explorer 7)(不再存在)
CSS中具有未知高度的垂直居中(兼容Internet Explorer 7)(归档文章由Wayback Machine提供)
还有一种使用JavaScript进行垂直居中的技术.使用JavaScript和CSS对内容进行垂直对齐可以证明这一点.
最简单的解决方案如下:
.outer-div{
width: 100%;
height: 200px;
display: flex;
border:1px solid #000;
}
.inner-div{
margin: auto;
text-align:center;
border:1px solid red;
}
Hey there!
如果有人只关心Internet Explorer 10(及更高版本),请使用flexbox:
.parent {
width: 500px;
height: 500px;
background: yellow;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.centered {
width: 100px;
height: 100px;
background: blue;
}
使用垂直居中元素的现代方法flexbox.
您需要父母来决定身高和孩子要居中.
下面的示例将div放在浏览器中心的中心.什么是重要的(在我的例子)是设置height: 100%于body和html,然后min-height: 100%到你的容器.
body, html {
background: #F5F5F5;
box-sizing: border-box;
height: 100%;
margin: 0;
}
#center_container {
align-items: center;
display: flex;
min-height: 100%;
}
#center {
background: white;
margin: 0 auto;
padding: 10px;
text-align: center;
width: 200px;
}
I am center.
如果您不关心Internet Explorer 6和7,则可以使用涉及两个容器的技术.
应该有 display: table;
应该有 display: table-cell;
应该有 vertical-align: middle;
应该有 display: inline-block;
您可以将任何内容添加到内容框中,而无需关心其宽度或高度!
body {
margin: 0;
}
.outer-container {
position: absolute;
display: table;
width: 100%; /* This could be ANY width */
height: 100%; /* This could be ANY height */
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
}
.centered-content {
display: inline-block;
background: #fff;
padding: 20px;
border: 1px solid #000;
}
Malcolm in the Middle
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* (x, y) => position */
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}
.vertical {
position: absolute;
top: 50%;
//left: 0;
transform: translate(0, -50%); /* (x, y) => position */
}
.horizontal {
position: absolute;
//top: 0;
left: 50%;
transform: translate(-50%, 0); /* (x, y) => position */
}
div {
padding: 1em;
background-color: grey;
color: white;
}
Vertically left
Horizontal top
Vertically Horizontal
当我不得不回到这个问题时,这总是我要去的地方.
对于那些不想跳跃的人:
将父容器指定为position:relative或position:absolute.
在子容器上指定固定高度.
设置position:absolute并top:50%在子容器上将顶部向下移动到父级的中间.
设置margin-top:-yy,其中yy是子容器高度的一半,以抵消项目.
代码中的一个示例:
...Hey look! I'm vertically centered!
How sweet is this?!
我刚刚写了这篇CSS并了解更多信息,请仔细阅读:本文垂直对齐任何只有3行CSS的内容.
.element {
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
}
使用CSS的flex属性。
.parent {
width: 400px;
height:200px;
background: blue;
display: flex;
align-items: center;
justify-content:center;
}
.child {
width: 75px;
height: 75px;
background: yellow;
}
京公网安备 11010802040832号 | 京ICP备19059560号-6 