Question

如何使用CSS在另一个div（垂直和水平）内将div居中？我的html是

<div class='outer'><div class='inner'></div></div>

和CSS-

.outer{
position: realative;
top:20%;
left20%;
width:500px;
height:500px;
background:red;
}
.inner{
position:relative;
width:100px;
height:100px;
background:#ff2;
/*code to align in centre*/
}

Answer 1

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

来源：https://www.w3schools.com/css/css_align.asp

Answer 2

将这些属性添加到外部div：

x=[[[1,2],[3,4]],[[5,6],[7,8]]]
print(x[1][0][1])

它将使内容居中。或者，您可以将其添加到内部：

display: flex;
justify-content: center;
align-items: center;

上面它会从各个方面推动自己。

Answer 3

有一个常见的问题，因此有多种方法：

转换

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

left和top将在父对象中翻译该项目，而transform将相对于其左上角对其进行翻译。

只要您知道position: fixed;和absolute之间的区别，

fixed也可以使用。

Flexbox

您需要与父母合作。您必须将以下属性设置为父级：

display: flex;
justify-content: center;
align-items: center;

孩子也应该有display: flex;以便于处理，但这不是强制性的。这种方法无需使用position: absolute;。

Answer 4

.inner{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5.5em;
    background-color: #8880;
}

Answer 5

使用div

display:flex;

.outer{
position: realative;
top:20%;
left:20%;
width:500px;
height:500px;
background:red;
display:flex;
align-items:center;
justify-content:center;
}
.inner{
position:relative;
width:100px;
height:100px;
background:#ff2;
/*code to align in centre*/
}

.outer{
position: realative;
top:20%;
left:20%;
width:500px;
height:500px;
background:red;
display:flex;
align-items:center;
justify-content:center;
}
.inner{
position:relative;
width:100px;
height:100px;
background:#ff2;
/*code to align in centre*/
}

https://jsfiddle.net/lalji1051/jqxtuvLz/1/

如何在div中居中放置div？

5 个答案: