Question

我是CSS新手。我希望div始终位于屏幕的中心位置。我知道通过定位我们可以实现它，但只有当我们有固定的宽度和高度时。我的要求是什么，我希望div具有固定宽度但没有固定高度。我希望使用CSS根据其中的内容调整到中心。

Answer 1

您正在寻找transform: translateY(-50%)财产。这是一个例子：

.main {
    width: 200px;
    position: fixed;
    background-color: red;
    position: fixed;
    top: 50%;
    left: 0px;
    right: 0px;
    transform: translateY(-50%);
    margin: auto;
}

<强> Working Fiddle

Answer 2

做这样的事情，你可以确定它总是在中间。

<强> HTML

<div id="outer">
<div id="content"></div>
</div>

<强> CSS

* {
    margin: 0 auto; /* centers everything except if otherwise floated 
   or affected by positioning positioning and margin property values */
}


#outer {
    width: 200px;
    height: auto;

}


#content {
    width: 200px;
    height: 100%;
    position: absolute;
    background-color: green;
    bottom: 0;

}

See working example here

解决方案：在一个没有浮动的div中包含有问题的DIV，它听取了第一个CSS代码块，但我没有做任何会影响其位置的事情。

如何将div保持在屏幕中心始终具有固定宽度和100％高度？

2 个答案: