Question

我有2个div

<div class="outerDiv">
   <div class="innerDiv">
        Hi i am trying to align center vertically and horizontally 
   </div>
<div>

如何将两个div（外部和内部）居中？

Answer 1

尝试this。

我为2个div添加了一个外包装，添加了边距并更改了位置类型。运行代码段。

.outerWrapper {
	position:absolute;
	left:50%;
	top:50%;
	margin:-75px 0 0 -135px;
}

<div class="outerWrapper">
    <div class="outerDiv">
        <div class="innerDiv">Hi i am trying to align center vertically and horizontally
        </div>
    <div>
</div>

修改

您可以将CSS应用于outerDiv并删除outerWrapper，但我建议您继续使用outerWrapper，这样您仍然可以更改内部和外部Div的边距。

Answer 2

在页面上居中使用未知宽度的元素的一种方法是使用CSS flexbox功能。

您需要为外部元素提供以下CSS属性：

.outerDiv{
    display: flex;
    justify-content: center;
    align-items: center;
}

这将使内部元素居中对齐外部元素。

justify-content: center;属性沿主轴对齐子元素，在本例中为水平元素。 align-items: center;属性表示十字轴，即垂直轴。

请注意，您可能需要vendor prefixing才能完全支持所有浏览器。（注意：此示例使用新规范）。

对于JSFiddle示例，请参阅我为您快速创建的this example。

Answer 3

这样可以正常使用

.outerDiv {
  position: fixed;
  width: 100%;
  height: 100%;
}
.innerDiv {
  text-align: center;
  margin: auto;
  top: 40%;
  position: relative;
}

<div class="outerDiv">
   <div class="innerDiv">
        Hi i am trying to align center vertically and horizontally 
   </div>
<div>

如何在没有width属性的文档中居中两个<div>？</div>

3 个答案: