HTML中div内容垂直居中显示

这篇具有很好参考价值的文章主要介绍了HTML中div内容垂直居中显示。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

HTML中要将 div 元素的内容垂直居中显示,你可以使用 CSS 的 flexbox 或者 grid 布局来实现。下面分别介绍两种方法。

方法一:使用 flexbox 布局

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh; /* 设置容器高度为视窗高度,以便垂直居中显示 */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>这是要垂直居中显示的内容</p>
    </div>
  </body>
</html>

在上述代码中,我们创建了一个具有 container 类名的 div 容器,并将其设置为 flex 布局。通过设置 align-items: centerjustify-content: center 属性,实现了垂直和水平方向上的居中对齐。同时,我们将容器的高度设置为视窗高度(height: 100vh),以确保容器占据整个视窗并垂直居中显示。

方法二:使用 grid 布局

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: grid;
        place-items: center;
        height: 100vh; /* 设置容器高度为视窗高度,以便垂直居中显示 */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>这是要垂直居中显示的内容</p>
    </div>
  </body>
</html>

在上述代码中,我们同样创建了一个具有 container 类名的 div 容器,并将其设置为 grid 布局。通过设置 place-items: center 属性,实现了内容在容器中的垂直和水平居中对齐。同样地,我们将容器的高度设置为视窗高度(height: 100vh),以确保容器占据整个视窗并垂直居中显示。

以上两种方法都能实现内容的垂直居中显示,你可以根据自己的需求选择其中一种来使用。文章来源地址https://www.toymoban.com/news/detail-817859.html

到了这里,关于HTML中div内容垂直居中显示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 实现div元素和文字水平及垂直居中的方法(超简单,适应各种场合)

    实现实现div元素和文字水平及垂直居中的方法如下: div元素水平居中: style=\\\"margin:0 auto\\\" div元素垂直居中: style=\\\"padding: (外层div的高-内层div的高)/2; background-clip:content-box; \\\" div文字水平居中: 外层div中style=\\\"text-align: center; \\\" div文字垂直居中: 内层div中style=\\\"line-height: 外层div的高

    2024年02月13日
    浏览(44)
  • 【Css/小程序】如何实现div或view中的文字左右居中和垂直居中?(已解决:多行和单行自适应)

    1、多行居中效果 2、单行照样居中效果 

    2024年02月04日
    浏览(49)
  • 前端html中让两个或者多个div在一行显示,用style给div加上css样式

    DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。DIV在编程中又叫做整除,即只得商的整数。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。 我们知道,默认情况下每个div都是单独一

    2024年02月14日
    浏览(61)
  • 【前端基础】垂直居中效果

    在网页设计中,要实现垂直居中效果,可以尝试以下几种常见的方法: Flexbox 布局 : 使用 Flexbox 布局是实现垂直居中效果的一种简单方法。以下是一个基本示例: Grid 布局 : 你也可以使用 CSS Grid 布局来实现垂直居中效果,类似于 Flexbox,但它更适合复杂的布局。 绝对定位

    2024年02月09日
    浏览(35)
  • css 实现 html 元素内文字水平垂直居中的N种方法

            上一篇博文写了div 中元素居中的N种常用方法,那么单个html元素:div(块级元素代表),span(行内元素代表)中的文字如何水平垂直都居中呢?实现方法如下:         本文例子使用的 html body结构下的模型如下:         例子居中效果都如下图: 注:当把div

    2024年02月13日
    浏览(54)
  • 如何让element-ui的el-row内容居中(水平垂直)

    如图,则主要代码是: type=\\\"flex\\\" justify=\\\"center\\\" align=\\\"middle\\\" 如图,则主要代码是: type=\\\"flex\\\" justify=\\\"center\\\" 如图,则主要代码是: type=\\\"flex\\\" align=\\\"middle\\\"

    2024年02月12日
    浏览(35)
  • 微信小程序布局图片上面显示文字以及文字水平垂直居中

     博主介绍: 本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮

    2024年02月14日
    浏览(51)
  • 【前端 | CSS系列】—— 第1篇:如何实现水平垂直居中对齐?

    单纯的元素 左右居中 对齐: 块级元素 可以使用 magrin: 0 auto ; 非块级元素 使用 text-align: center;

    2024年02月13日
    浏览(52)
  • 前端div水平居中的几种实现方式

    父元素开启 display:flex 布局,并设置 justify-content:center 主轴的空隙分布 因为是单行,所以使用 align-items:center 设置侧轴上的对其方式 啊啊啊 借助这一条规则 文章: https://www.zhihu.com/question/21644198/answer/42702524 https://www.w3.org/TR/CSS2/visudet.html#blockwidth top、left、right、bottom 设置百分比基

    2024年02月07日
    浏览(66)
  • wpf中listview内容居中显示

     在WPF中使用ListView经常会用到GridView作为视图,但是却碰到GridViewColumn不能居中对齐的问题, 实现方法 给ListViewItem设置Style,让ListViewItem在水平方向拉伸填充:       Setter Property=\\\"HorizontalContentAlignment\\\" Value=\\\"Stretch\\\"/    ListView ItemContainerStyle=\\\"{StaticResource ListViewItemStyle}\\\"  然后再给

    2024年02月07日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包