当前位置：首页 > 源码资料 > 正文内容

div 居中，CSS实现div水平垂直居中

wzgly2个月前 (07-09)源码资料2

div 居中是网页设计中常用的布局技巧，用于使页面中的div元素水平或垂直居中显示，水平居中可以通过设置div的左右边距为auto来实现，而垂直居中则可以通过结合使用transform属性和flex布局或绝对定位与负margin来实现，这种方法能够确保div在不同尺寸的屏幕和容器中都能保持居中，提高网页的响应式设计和用户体验。

嗨,大家好！最近我在学习前端开发，遇到了一个挺有意思的问题——如何让div元素在网页中居中显示，我知道这应该是CSS布局中的常见问题，但具体怎么做我还是有点懵，希望有大神能指点一二，谢谢啦！

一：水平居中

使用margin属性：

设置左右margin为auto,margin: 0 auto;。

使用flex布局：

将父元素设置为flex容器,并设置justify-content属性为center，display: flex; justify-content: center;。

使用Grid布局：

将父元素设置为grid容器,并设置justify-items属性为center，display: grid; justify-items: center;。

使用定位：

设置div的position属性为absolute,并设置left和right为50%，top和bottom为auto，然后通过transform属性进行微调，position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);。

二：垂直居中

使用margin属性：

设置上下margin为auto,margin: auto 0;。

使用flex布局：

将父元素设置为flex容器,并设置align-items属性为center，display: flex; align-items: center;。

使用Grid布局：

将父元素设置为grid容器,并设置align-items属性为center，display: grid; align-items: center;。

使用定位：

设置div的position属性为absolute,并设置top和bottom为50%，left和right为auto，然后通过transform属性进行微调，position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);。

三：水平和垂直同时居中

使用flex布局：

将父元素设置为flex容器,并设置justify-content和align-items属性都为center，display: flex; justify-content: center; align-items: center;。

使用Grid布局：

将父元素设置为grid容器,并设置justify-content和align-items属性都为center，display: grid; justify-content: center; align-items: center;。

使用定位：

设置div的position属性为absolute,并设置top、left、right和bottom都为50%，然后通过transform属性进行微调，position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);。

四：居中特定内容

使用flex布局：

将父元素设置为flex容器,并设置justify-content和align-items属性都为center，然后设置子元素宽度或高度，.parent { display: flex; justify-content: center; align-items: center; } .child { width: 100px; height: 100px; }。

使用Grid布局：

将父元素设置为grid容器,并设置justify-content和align-items属性都为center，然后设置子元素宽度或高度，.parent { display: grid; justify-content: center; align-items: center; } .child { width: 100px; height: 100px; }。

使用定位：

设置div的position属性为absolute,并设置top、left、right和bottom都为50%，然后通过transform属性进行微调，并设置子元素宽度或高度，.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; }。

五：居中多个div元素

使用flex布局：

将父元素设置为flex容器,并设置justify-content和align-items属性都为center，然后设置子元素宽度或高度，.parent { display: flex; justify-content: center; align-items: center; } .child { width: 100px; height: 100px; }。

使用Grid布局：

将父元素设置为grid容器,并设置justify-content和align-items属性都为center，然后设置子元素宽度或高度，.parent { display: grid; justify-content: center; align-items: center; } .child { width: 100px; height: 100px; }。

使用定位：

设置父元素为relative,子元素为absolute，并设置子元素的left、top、right和bottom都为50%，然后通过transform属性进行微调，并设置子元素宽度或高度，.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; }。

希望这篇文章能帮助到大家解决div居中的问题,祝大家学习愉快！

其他相关扩展阅读资料参考文献：

Div居中：多种方法解析

在Web开发中，我们经常遇到需要将元素在容器中居中的情况，虽然这是一个常见需求，但实现方法却多种多样，本文将介绍几种常见的div居中方法,并深入探讨其原理和应用场景。

水平居中

文本水平居中

在CSS中，要使文本水平居中，只需使用text-align: center;即可，这种方法适用于文本内容,可以将文字轻松居中显示。

块级元素水平居中

对于块级元素（如div），可以通过设置左右外边距为自动来实现水平居中，这需要设置margin-left: auto;和margin-right: auto;，并且元素必须处于可伸缩容器内，要确保元素宽度已设置,否则无法生效。

垂直居中

行内元素垂直居中

对于行内元素，可以通过设置vertical-align: middle;来实现垂直居中,但这种方法对于块级元素无效。

块级元素垂直居中（静态布局）

在静态布局中，块级元素的垂直居中可以通过绝对定位结合负边距实现，具体做法是将元素相对其父容器定位，然后使用负下边距来抵消上半部分的高度，这种方法需要精确计算边距,对于复杂布局可能不太适用。

使用现代布局技术居中

Flex布局

Flex布局是现代CSS中非常强大的布局工具，要实现div的居中，只需将父容器设置为Flex布局，并使用justify-content: center;和align-items: center;即可实现水平和垂直居中，这种方法简单易用,适用于多种场景。

Grid布局

Grid布局也是现代CSS中的另一个强大工具，通过创建网格线并放置内容，可以轻松实现div的居中,这种方法对于创建复杂的二维布局非常有效。

使用CSS框架居中

Bootstrap框架

Bootstrap是一个流行的前端框架，提供了许多现成的CSS类来帮助开发者快速布局和定位元素，通过Bootstrap的内置类,可以轻松实现div的居中。

本文介绍了多种实现div居中的方法，包括水平居中和垂直居中的多种技巧，在实际开发中，可以根据具体需求和场景选择合适的方法，现代布局技术如Flex和Grid布局以及前端框架如Bootstrap都为我们提供了强大的工具来实现元素的居中，理解这些方法的基本原理和应用场景,将有助于我们更加高效地开发Web应用。