如何在 HTML 中使 div 居中对齐?
htmlweb developmentfront end technology
DIV 被称为分隔标签，顾名思义，它用于对网页内容进行划分。
DIV 标签由打开和关闭标签
通过使用 class 或 id 属性，DIV 标签可以使用 CSS 轻松设置样式，也可以使用 JavaScript 进行操作。任何类型的数据都可以放置在
示例
以下是
HTML tutorial
执行上述程序后，将显示一个包含 div 元素和文本的网页，文本颜色将按指定颜色显示为黑色。
HTML 中的 DIV 居中对齐
以下是 DIV 居中对齐 − 的用法
要将 div 元素居中对齐，我们使用 −
"div style="text-align:center" "
要将 div 居中，我们可以使用如下所示的语法 −
"div style="margin: 0 auto" "
示例
以下是
Welcome to TutorialsPoint
执行上述程序后，将显示一个 div 元素及其内部的
元素，并在代码中显示指定的文本。
现在让我们看看居中 DIV 的不同对齐方式
使用 CSS Margin Auto 居中 DIV
使用值 0 auto 的 简写 margin 属性 将块级元素(如 div)水平居中 −
示例
以下是使用 CSS Margin Auto 居中对齐
Center a Div with CSS Margin Auto
运行上述程序时，将显示一个 div 元素，该元素的格式设置为居中，并使用 CSS 自动边距。
将 DIV 垂直和水平居中
要将 DIV 垂直和水平居中，我们需要知道要居中的元素的宽度和高度。
步骤
对于父元素，将position属性设置为relative。
将子元素的position属性设置为absolute，将top设置为50%，将left设置为50%。它使子元素的左上角垂直和水平居中。
应用设置为子元素高度一半的负上边距，以及设置为子元素宽度一半的负左边距。
示例
以下是
Center Both Vertically and Horizontally
当我们运行上述程序时，将显示一个 div 元素和一个子 div 元素，其格式为居中。
相关文章
如何查找 HTML select 标签中所有选中的选项?
HTML 中的容器标签和空标签
如何创建不跟随链接的 HTML 链接?
什么是 HTML 5 标准事件?
如何将 YouTube 视频添加到您的网站?
如何在 HTML5 中处理地理位置错误?
如何在 HTML 网页中添加音频播放器?
如何在 HTML 页面中添加视频?
HTML DOM Input Email required 属性
HTML DOM Input Datetime name 属性
打印
下一节 ❯❮ 上一节