如何使用CSS+DIV定位视屏

Posted 2023-03-09

如何使用CSS+DIV定位视屏，求代码和详细解释

<div style="position:relative; top:xxpx; left:xxpx;">其中的relative可以改为一下几种：
static 默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。
relative 位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。
absolute 位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。
fixed 位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。 参考技术A 没见过的科技啊

如何在 CSS 中垂直定位 DIV 元素

【中文标题】如何在 CSS 中垂直定位 DIV 元素

【英文标题】：How to Vertically Position DIV Elements in CSS

【发布时间】：2022-01-16 04:35:50

【问题描述】：

在 CSS 中定位我的内容时遇到问题。我想获取我的内容并垂直放置它。我尝试过使用 flexbox，但它没有用。我知道 flexbox 是什么以及它的属性，但它对我不起作用。这是 CSS 和 HTML 代码。

HTML：

<div class="main-div">
    <div class="container-1">
    
        <h2>What is Your Age In Days?</h2>
        <div class="flex-box-container-1">
            <div>
                <button class="btn btn-primary" onclick="ageInDays()">Click Me!</button>
            </div>
            <div>
                <button class="btn btn-danger" onclick="reset()">Try Again</button> 
            </div>
        </div>

        <div class="flex-box-container-1">
            <div id="flex-box-result"></div>
        </div>

    </div>


    <div class="container-2">
        <h2>Generator</h2>
        <button class="btn btn-success" id="picture-generator" onclick=pictureGenerator()>GENERATE</button>

        <div class="flex-box-container-2" id="picture-gen">
        </div>

    </div>
</div>

CSS：

body 
    background-image: url(Background.jpeg)



.container-1, .container-2 
    border: 1px solid;
    margin: 0 auto;
    text-align: center;
    width: 75%;


.flex-box-container-1, .flex-box-container-2 
    display: flex;
    padding: 10px;
    border: 1px solid black;    
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;


.flex-box-container-1 div 
    padding: 10px;
    align-items: center;
    display: flex;


#flex-box-result 
    font-size: 32px;
    font-weight: bold;



#yikes 
    font-size: 32px;
    font-weight: bold;
    Animation-name: example;
    Animation-duration: 0.5s;
    animation-iteration-count: infinite;;


@keyframes example 
    10% color: red;
    15% color: yellow;
    20% color: blue;
    30% color: green;
    40% color: lightsalmon;
    50% color: lightsteelblue
    60% color: steelblue
    70% color: ivory
    80% color: purple
    90% color: pink
    100% color: magenta;
    



.flex-box-container-2 img 
    box-shadow: -12px 11px 28px 6px rgba(0,0,0,0.69);
    margin: 10px;

所以，我必须垂直对齐容器 1 和 2。我尝试使用 Justify Content 和 Align Items 来做到这一点，但没有成功。我感谢每一点帮助。

【问题讨论】：

我不太清楚你的目标是什么。容器 1 和容器 2 是否彼此相邻？以及在什么意义上垂直对齐（中心对齐或顶部或..）。

容器 1 和 2 彼此相邻。我想将它们垂直居中。如果想看代码输出，这里是js小提琴链接：jsfiddle.net/y924rv7g

这能回答你的问题吗？ Vertically center elements in a div

不，它没有。我试过使用 flexbox 和它的属性，但它们对我不起作用。

要对齐哪些元素？我了解您希望 container-1 和 container-2 彼此相邻，但是您希望它们各自内容的哪些位彼此对齐？标题和/或按钮？

【参考方案1】：

您可以使用flex-direction: column 垂直定位它。

【讨论】：

我的意思是垂直对齐它。我需要上下移动它。

您可以尝试将 Justify-Content 和 Align Items 设置为居中

是的，我试过了。它没有用。想自己看的话，可以看js fiddle上的代码，jsfiddle.net/y924rv7g

【参考方案2】：

如果 Flex 不适合您，据我所知，还有另外两种方法。

第一个是在父元素上使用display: table; width: 100%;，在要垂直对齐的子元素上使用display: table-cell; vertical-align: middle;。

第二个涉及在父元素上使用position: relative，在子元素上使用position: absolute; top: 50%; transform: translateY(-50%);。

如果您想将 container-1 和 container-2 居中，一个在另一个之上，您必须创建另一个 div 包装了这两个。在这种情况下，这将是您的子元素。

如果您希望两个容器彼此相邻，请使用引导程序的网格系统为它们提供适当的 col 类，并将这两个容器视为子容器。

在上述两种情况下，你的父元素都应该是.main-div。

【讨论】：

非常感谢您的帮助，但我想坚持使用 flexbox。我更新了我的一些代码，你可以在这里看到它jsfiddle.net/21mL930y如果你找到解决方案请告诉我。