<div>元素中的中心元素

要居中一个HTML元素，我可以使用CSS左:50%;。但是，这使得元素相对于整个窗口居中。

我有一个元素，它是<div>元素的子元素，我想让子元素以<div>这个父元素居中，而不是整个窗口。

我不希望容器<div>的所有内容居中，只是一个特定的子。

当前回答

你可以像这样使用bootstrap flex类名:

<div class="d-flex justify-content-center">
    // the elements you want to center
</div>

即使里面有很多元素也可以。

2019-12-21 16:11:48

其他回答

你可以像这样使用bootstrap flex类名:

<div class="d-flex justify-content-center">
    // the elements you want to center
</div>

即使里面有很多元素也可以。

2019-12-21 16:11:48

我相信现代的方法是在父容器中放置位置-项目:居中

一个例子可以在这里找到:https://1linelayouts.glitch.me

2020-07-23 18:13:38

如果这些答案都没有，那就对了。试试这个。水平和垂直对齐的子元素。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div class="container">
            <div class="content">
                <img width="300px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Building92microsoft.jpg/800px-Building92microsoft.jpg" alt="microsoft" />
            </div>
        </div>
    </body>
    <style>
        .container {
            display: flex; /* can also use grid */
            background-color: #47472d;
            width: 500px;
            height: 400px;
            overflow: auto;
        }
        .content { margin: auto; }
    </style>
</html>

2022-09-20 23:54:56

弯曲后，它显示文章

.container { 显示:flex; 颜色:蓝色; 背景颜色:黄色; justify-content:中心; ｝ < div class = "容器" > < div > < / div元素> < / div > 如果你水平和垂直地设置元素中心。

.container { 显示:flex; 颜色:蓝色; 身高:100 px; 背景颜色:黄色; justify-content:中心; 对齐项目:中心; ｝ < div class = "容器" > < div > < / div元素> < / div >

2022-10-19 15:11:17

只需要给出父div的位置:relative

2011-07-24 22:07:38

<div>元素中的中心元素

推荐文章

最新文章

标签