如何让div居中？-css教程

首页 2024-07-11 22:53:06

如何在 css 中将 div 居中

使div居中是最不可能的

1. 使用 flexbox 居中

flexbox 它是一种垂直和水平内容的现代方式：

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

<div class="container">
    <div class="centered-div">centered content</div>
</div>

2. 网格居中

css grid 还可以居中内容：

.container {
    display: grid;
    place-items: center;
    height: 100vh;
}

<div class="container">
    <div class="centered-div">centered content</div>
</div>

3. 绝对定位在中间

您可以使用绝对定位 div 居中：

.container {
    position: relative;
    height: 100vh;
}
.centered-div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<div class="container">
    <div class="centered-div">centered content</div>
</div>

4. 使用 margin auto 居中

对简单的水平居中，请使用 margin: auto:

.centered-div {
    width: 50%;
    margin: 0 auto;
}

<div class="centered-div">centered content</div>

5. 使用 margin auto 居中

内联元素或内联元素：

.container {
    text-align: center;
    line-height: 100vh; /* full viewport height for vertical centering */
}
.centered-div {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

<div class="container">
    <div class="centered-div">centered content</div>
</div>

以上就是如何让div居中？详情请关注其他相关文章！

阅读全文

上一篇：关键数据守护，备份恢复至最新，安心无忧！
下一篇：相册删照不用慌，三步恢复全攻略！

如何让div居中？-css教程

首页 2024-07-11 22:53:06

最新文章

相关文章