”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 在 HTML 和 CSS 中使 Div 居中的不同方法

在 HTML 和 CSS 中使 Div 居中的不同方法

发布于2024-08-02
浏览:158

Different Ways to Center a Div in HTML and CSS

在 LinkedIn 上关注我
在 Github.com 上关注我

点击阅读

没有Boaring Setion,我们可以重定向到编码!

1. 使用 Flexbox

Flexbox 是一款功能强大的布局工具,可以轻松地将元素水平和垂直居中。

例子:



    
    
    Center Div with Flexbox
    


    
Centered with Flexbox

2. 使用网格

CSS Grid 是另一个强大的布局系统,可以轻松地将元素居中。

例子:



    
    
    Center Div with Grid
    


    
Centered with Grid

3. 使用绝对定位和变换

此方法涉及绝对定位 div 并使用变换将其居中。

例子:



    
    
    Center Div with Absolute Positioning
    


    
Centered with Absolute Positioning

4. 使用自动保证金

对指定宽度的元素设置margin: auto可以使其水平居中。

例子:



    
    
    Center Div with Margin Auto
    


    
Centered with Margin Auto

5. 使用表格显示

此方法使用 display: table 和 display: table-cell 使元素居中。

例子:



    
    
    Center Div with Table Display
    


    
Centered with Table Display

拜耶
快乐编码!

版本声明 本文转载于:https://dev.to/muhammedshamal/different-ways-to-center-a-div-in-html-and-css-47df?1如有侵犯,请联系[email protected]删除
最新教程 更多>

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3