我想用CSS垂直居中放置一个div。我不需要表或JavaScript,只需要纯CSS。我找到了一些解决方案,但都缺少Internet Explorer 6支持。
<body>
<div>Div to be aligned vertically</div>
</body>
如何在所有主要浏览器(包括Internet Explorer 6)中垂直居中放置div?
我想用CSS垂直居中放置一个div。我不需要表或JavaScript,只需要纯CSS。我找到了一些解决方案,但都缺少Internet Explorer 6支持。
<body>
<div>Div to be aligned vertically</div>
</body>
如何在所有主要浏览器(包括Internet Explorer 6)中垂直居中放置div?
当前回答
不回答浏览器兼容性,但也要提到新的网格和不那么新的Flexbox功能。
Grid
来自:Mozilla-网格文档-垂直对齐Div
浏览器支持:网格浏览器支持
CSS:
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
grid-auto-rows: 200px;
grid-template-areas:
". a a ."
". a a .";
}
.item1 {
grid-area: a;
align-self: center;
justify-self: center;
}
HTML格式:
<div class="wrapper">
<div class="item1">Item 1</div>
</div>
柔性包装箱
浏览器支持:Flexbox浏览器支持
CSS:
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
其他回答
最简单的方法是以下三行CSS:
1) 位置:相对;
2) 顶部:50%;
3) 变换:translateY(-50%);
以下是一个示例:
外部配电盘{高度:170px;宽度:300px;背景色:浅灰色;}中间分隔符{位置:相对;顶部:50%;-webkit转换:translateY(-50%);-ms变换:translateY(-50%);变换:translateY(-50%);}<div class='outer-div'><div class='middle-div'>测试文本</div></div>
这是迄今为止最简单的方法,也适用于非阻塞元素。唯一的缺点是它是Flexbox,因此,较旧的浏览器将不支持此功能。
<div class="sweet-overlay">
<img class="centered" src="http://jimpunk.com/Loading/loading83.gif" />
</div>
指向CodePen的链接:
http://codepen.io/damianocel/pen/LNOdRp
这里重要的一点是,对于垂直居中,我们需要定义父元素(容器),并且img的高度必须小于父元素。
当我不得不回到这个问题上时,这总是我要去的地方。
对于那些不想跳的人:
将父容器指定为位置:相对或位置:绝对。指定子容器上的固定高度。在子容器上设置位置:绝对和顶部:50%,以将顶部向下移动到父容器的中间。设置页边距上限:-yy,其中yy是子容器高度的一半,以向上偏移项目。
代码中的示例:
<style type="text/css">
#myoutercontainer {position:relative}
#myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
垂直和水平居中
HTML
<div id="dialog">Centered Dialog</div>
CSS
#dialog {
position:fixed; top:50%; left:50%; z-index:99991;
width:300px; height:60px;
margin-top:-150px; /* half of the width */
margin-left:-30px; /* half of the height */}
享受
我只是找到了另一种对我有用的方法:
<div class="container">
<div class="vertical">
<h1>Welcome</h1>
<h2>Aligned Vertically</h2>
<a href="#">Click ME</a>
</div>
</div>
CSS
.vertical{
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
更多信息