我想用CSS垂直居中放置一个div。我不需要表或JavaScript,只需要纯CSS。我找到了一些解决方案,但都缺少Internet Explorer 6支持。

<body>
    <div>Div to be aligned vertically</div>
</body>

如何在所有主要浏览器(包括Internet Explorer 6)中垂直居中放置div?


当前回答

将元素垂直居中的现代方法是使用flexbox。

你需要父母来决定身高,孩子来居中。

下面的示例将使div在浏览器中居中。重要的是(在我的示例中)将height:100%设置为body和html,然后将min-height:100%设置到容器。

正文,html{背景:#F5F5F5;框大小调整:边框框;高度:100%;边距:0;}#中心容器{对齐项目:居中;显示:柔性;最小高度:100%;}#中心{背景:白色;边距:0自动;填充:10px;文本对齐:居中;宽度:200px;}<div id='center_container'>我是中心</分区></div>

其他回答

可以通过两种方式实现

body{
left: 50%; 
top:50%; 
transform: translate(-50%, -50%); 
height: 100%; 
width: 100%; 
}

OR

使用flex

body {
    height:100%
    width:100%
    display: flex;
    justify-content: center;
    align-items: center;
}

对齐项目:居中;使内容垂直居中

对齐内容:中心;使内容水平居中

下面是我可以构建的最好的全方位解决方案,以垂直和水平居中固定宽度、灵活高度的内容框。它已在Firefox、Opera、Chrome和Safari的最新版本中测试并运行。

.外部{显示:表格;位置:绝对;顶部:0;左:0;高度:100%;宽度:100%;}.中间{显示:表格单元格;垂直对齐:中间;}.内部{左边距:自动;右边距:自动;宽度:400px;/*你想要什么宽度*/}<div class=“outer”><div class=“middle”><div class=“inner”><h1>内容</h1><p>从前,一个沉闷的午夜</p></div></div></div>

查看动态内容的工作示例

我内置了一些动态内容来测试它的灵活性,并希望知道是否有人发现它有任何问题。它也可以很好地用于居中的覆盖——灯箱、弹出窗口等。

最简单的方法是以下三行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>

.中心{位置:绝对;顶部:50%;左:50%;转换:转换(-50%,-50%);/*(x,y)=>位置*/-ms转换:转换(-50%,-50%);/*即9*/-webkit转换:转换(-50%,-50%);/*Chrome、Safari、Opera*/}.垂直{位置:绝对;顶部:50%;//左:0;变换:平移(0,-50%);/*(x,y)=>位置*/}.水平{位置:绝对;//顶部:0;左:50%;变换:平移(-50%,0);/*(x,y)=>位置*/}第二部分{填充:1em;背景色:灰色;颜色:白色;} <body><div class=“vertical”>垂直向左</div><div class=“horizontal”>水平顶部</div><div class=“center”>垂直水平</div></body>

相关:居中图像

CSS网格

正文,html{margin:0;}正文{显示:栅格;最小高度:100vh;对齐项目:居中;}<div>div垂直对齐</div>