我想用 CSS 将div
垂直居中。我不需要表或 JavaScript,而只需要纯 CSS。我找到了一些解决方案,但是所有这些解决方案都缺少 Internet Explorer 6 支持。
<body>
<div>Div to be aligned vertically</div>
</body>
如何在所有主要浏览器(包括 Internet Explorer 6)中垂直居中放置div
?
下面是我可以构建的最好的全方位解决方案,以使固定宽度, 高度灵活的内容框垂直和水平居中。它已经过测试,可用于 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*/
}
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
我构建了一些动态内容来测试灵活性,并且很想知道是否有人看到它的任何问题。它也应适用于居中的叠加层 - 灯箱,弹出窗口等。
我在清单上看不到的另一个:
.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;
}
height
(请参见可变高度 ) overflow: auto
以防止内容溢出(请参见溢出) 来源: CSS 中的绝对水平和垂直居中
最简单的方法是 CSS 的以下3 行 :
1)职位:相对;
2)最高:50%;
3)转换:translateY(-50%);
以下是一个示例 :
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 class='outer-div'>
<div class='middle-div'>
Test text
</div>
</div>
实际上,您需要两个 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;
}
<div id="container">
<div id="content">
<h1>Centered div</h1>
</div>
</div>
这是结果
现在,对于现代浏览器来说,flexbox 解决方案是一种非常简单的方法,因此我为您推荐:
.container{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background:green;
}
body, html{
height:100%;
}
<div class="container">
<div>Div to be aligned vertically</div>
</div>
这是我找到的最简单的方法,我一直都在使用它( 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;
}
<div class="v-wrap">
<article class="v-box">
<p>This is how I've been doing it for some time</p>
</article>
</div>
支持始于 IE8。
经过大量研究,我终于找到了最终的解决方案。它甚至适用于浮动元素。 查看资料
.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 id="vh" class="box">Div to be aligned vertically</div>
另一个选择是使用 flex 框, 检查小提琴链接 。
.vh {
background-color: #ddd;
height: 400px;
align-items: center;
display: flex;
}
.vh > div {
width: 100%;
text-align: center;
vertical-align: middle;
}
<div class="vh">
<div>Div to be aligned vertically</div>
</div>
另一个选择是使用 CSS 3 转换:
#vh {
position: absolute;
top: 50%;
left: 50%;
/*transform: translateX(-50%) translateY(-50%);*/
transform: translate(-50%, -50%);
}
.box{
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
padding: 25px;
width: 100px;
height: 100px;
background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>
笔记
1. 给父元素一个类名。
2. 如果支持的浏览器需要,请添加弹性厂商前缀。
.verticallyCenter {
display: flex;
align-items: center;
}
<div class="verticallyCenter" style="height:200px; background:beige">
<div>Element centered vertically</div>
</div>
最简单的解决方案如下:
.outer-div{
width: 100%;
height: 200px;
display: flex;
border:1px solid #000;
}
.inner-div{
margin: auto;
text-align:center;
border:1px solid red;
}
<div class="outer-div">
<div class="inner-div">
Hey there!
</div>
</div>