使用绝对位置水平和垂直居中div

贴纸

我按照一些指南进行操作,使div可以在垂直和水平方向上居中,但这是行不通的。

http://jsfiddle.net/ony80a5d/

<div class="c">center</div>

html, body {
    height: 100%;
}
.c {
    background: grey;
    width: 50%;
    height: 50%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
乔什·克罗齐耶(Josh Crozier)

一种选择是将添加margin: auto到元素。在现代浏览器中,这将使元素水平/垂直居中。

有关将元素水平/垂直居中的更多方法,请参见此答案

更新的例子

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.c {
    background: grey;
    width: 50%;
    height: 50%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto
}
<div class="c">center</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

垂直和水平在div中居中div,绝对位置

来自分类Dev

水平和垂直居中绝对定位的元素

来自分类Dev

居中div绝对位置?

来自分类Dev

如何使用绝对位置和左偏移量水平居中文本 Div

来自分类Dev

使用flexbox在div内居中div并使用绝对位置

来自分类Dev

垂直居中,绝对位置,多个元素

来自分类Dev

使用jQuery在水平和垂直方向上动态居中div

来自分类Dev

水平和垂直居中放置DIV

来自分类Dev

水平和垂直将容器div居中

来自分类Dev

如何在放置在绝对位置的响应图像上垂直和水平居中放置文本?

来自分类Dev

HTML:了解居中的Div的绝对位置

来自分类Dev

需要居中div绝对位置

来自分类Dev

HTML:了解居中的Div的绝对位置

来自分类Dev

身体高度时垂直居中div:100%无绝对位置

来自分类Dev

在div中将居中的绝对位置的图像水平居中,而不会出现水平滚动条(也在移动设备中)

来自分类Dev

在绝对位置的div中垂直和水平对齐锚点

来自分类Dev

如何使用flexbox在div内水平和垂直居中放置div?

来自分类Dev

水平和垂直居中img

来自分类Dev

水平和垂直居中窗口

来自分类Dev

附加图像时水平和垂直居中的div“跳跃”

来自分类Dev

为什么div不在水平和垂直方向居中?

来自分类Dev

水平和垂直将两个div居中(CSS)

来自分类Dev

在div元素中居中水平和垂直对齐文本

来自分类Dev

水平和垂直居中div不会扭曲内容

来自分类Dev

水平和垂直居中放置DIV容器

来自分类Dev

附加图像时水平和垂直居中的div“跳跃”

来自分类Dev

将div内水平和垂直居中对齐图像

来自分类Dev

在div元素中居中水平和垂直对齐文本

来自分类Dev

保证金div以水平和垂直居中

Related 相关文章

热门标签

归档