我想用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?
当前回答
我最近发现了一个技巧:你需要使用前50%,然后再进行translateY(-50%)。
.外部div{位置:相对;高度:150px;宽度:150px;背景色:红色;}.居中div{位置:绝对;顶部:50%;-webkit转换:translateY(-50%);-ms变换:translateY(-50%);变换:translateY(-50%);背景色:白色;}<div class='outer-div'><div class='entered-div'>测试文本</div></div>
其他回答
要使div在页面上居中,请选中fiddle链接。
#甚高频{边距:自动;位置:绝对;顶部:0;左:0;底部:0;右:0;}.box格式{边框半径:15px;方框阴影:0 0 8px rgba(0,0,0、0.4);填充:25px;宽度:100px;高度:100px;背景:白色;}<div id=“vh”class=“box”>div垂直对齐</div>
另一种选择是使用flex框,选中fiddle链接。
.vh文件{背景色:#ddd;高度:400px;对齐项目:居中;显示:柔性;}.vh>div{宽度:100%;文本对齐:居中;垂直对齐:中间;}<div class=“vh”><div>div垂直对齐</div></div>
另一种选择是使用CSS 3转换:
#甚高频{位置:绝对;顶部:50%;左:50%;/*变换:translateX(-50%)translateY(-50%)*/转换:转换(-50%,-50%);}.box格式{边框半径:15px;方框阴影:0 0 8px rgba(0,0,0、0.4);填充:25px;宽度:100px;高度:100px;背景:白色;}<div id=“vh”class=“box”>div垂直对齐</div>
如果有人只关心Internet Explorer 10(及更高版本),请使用Flexbox:
.父级{宽度:500px;高度:500px;背景:黄色;显示:-webkit flex;显示:-ms flexbox;显示:柔性;-webkit调整内容:中心;-ms柔性包装:中心;对齐内容:中心;-webkit对齐项目:中心;-ms flex align:中心;对齐项目:居中;}.居中{宽度:100px;高度:100px;背景:蓝色;}<div class=“parent”><div class=“center”></div></div>
Flexbox支架:http://caniuse.com/flexbox
我用这个。它适用于Internet Explorer 8和更高版本:
高度:268px-用于显示:表的作用类似于最小高度。
CSS:
* {
padding: 0;
margin: 0;
}
body {
background: #cc9999;
}
p {
background: #f0ad4e;
}
#all {
margin: 200px auto;
}
.ff-valign-wrap {
display: table;
width: 100%;
height: 268px;
background: #ff00ff;
}
.ff-valign {
display: table-cell;
height: 100%;
vertical-align: middle;
text-align: center;
background: #ffff00;
}
HTML格式:
<body>
<div id="all">
<div class="ff-valign-wrap">
<div class="ff-valign">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
</div>
</div>
</div>
</body>
使用CSS Flexbox align items属性来实现这一点。
html,正文{高度:100%;}正文{显示:柔性;对齐项目:居中;}<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;
}
跨浏览器(包括Internet Explorer 8-Internet Explorer 10,无黑客攻击!)响应百分比和最小值/最大值-居中,不考虑填充(不考虑框大小!)必须声明高度(请参见可变高度)建议设置溢出:自动防止内容溢出(请参阅溢出)
来源:CSS中的绝对水平和垂直居中