html - 如何水平和垂直居中一个div

标签 html css center

<分区>

这是源代码:

<div id = "outer">
     <div id="top">
     ....
     </div>

     <div id="inner">
     ....
     </div>

     <div id="bottom">
     ....
     </div>
</div>

如何让 div(id inner)水平和垂直居中?

水平居中可以,但是垂直居中不行...

最佳答案

如果您知道内部 div 的尺寸,则可以使用 CSS。

#outer {
    position: relative;
}

#inner {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

还有其他选项使用 display: table-cellvertical-align: middle 等。

其他选项包括 JavaScript 来动态确定内部 div 的尺寸并像以前的答案一样设置负边距。

关于html - 如何水平和垂直居中一个div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4325643/

相关文章:

html - 彼此相邻的行内 block 元素 - 防止较长的文本跳到其旁边的元素下方

javascript - 我公司的 UI 设计师和营销人员不想要 "awkward line breaks"。 CSS 或 JS 怎么办?

html - 将 DIV 中包含的一系列图像垂直居中时出现问题

html - 使用 img 覆盖修改插入符号

javascript - jQuery仅隐藏单击的特定表行onclick事件

php - 如何使用 PHP 或 HTML 但不使用 JS 创建简单的树形菜单?

css - 以中心为基线的 CSS 中的左值?

ios - 将自动布局约束常量 X 动画化到父 View 的中心

CSS 选择器速度

html - CSS如何把标题放在边框前面?