垂直居中div五种常用方式

最新推荐文章于 2023-09-11 18:44:00 发布
最新推荐文章于 2023-09-11 18:44:00 发布
阅读量279 收藏
点赞数 1
文章标签： html css flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45256184/article/details/119514496
版权

原创不易，求一键三连！！！

1.运用absolute和calc垂直居中

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .demo{
            width: 300px;
            height: 300px;
            background-color: red;
            position: absolute;
            top: calc(50% - 150px);
            left: calc(50% - 150px);
        }
    </style>
    <body>
        <div class="demo"></div>
    </body>

2.运用flex布局进行垂直居中

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            //必须标明父盒子的具体高度,有局限性
            height: 600px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .demo{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
    <body>
        <div class="demo"></div>
    </body>

3.运用absolute进行垂直居中

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .demo{
            width: 300px;
            height: 300px;
            background-color: red;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -150px 0 0 -150px;
        }
    </style>
    <body>
        <div class="demo"></div>
    </body>

4.运用margin:auto进行垂直居中

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .demo{
            width: 300px;
            height: 300px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
    </style>
    <body>
        <div class="demo"></div>
    </body>

5.运用transform+absolute实现的居中

    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .demo {
        width: 300px;
        height: 300px;
        background-color: red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
      }
    </style>
    <body>
        <div class="demo"></div>
    </body>

统一效果图如下：

image.png

落栀枫羽
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
常用的css将元素垂直居中的6种方法
01-08
常用的css将元素垂直居中的方法 1. 使用line-height将单行文本垂直居中 设置line-height等于height，可使单行文本垂直居中 例： div { height: 50px; width: 200px; border: 1px solid #ccc; } 效果如下： 加入line-height属性后 div { height: 50px; width: 200px; border: 1px solid #c
手把手教你CSS水平、垂直居中的10种方式(小结)
12-30
面试必备，工作一定会用到。emmm大家都懂的，话不多...要怎么实现上面这幅图的效果呢，下面为大家总结了10中常用的方法。首先我先创建一个公共的模板样式 <div class=two> <div class=parent> <div class=child
让子盒子在父盒子中垂直居中的七个方法
al654123的博客
02-28 6835
一、用padding实现 1.padding-top = (父盒子的高度 - 子盒子的高度) / 2 2.padding-left = (父盒子的宽度 - 子盒子的宽度) / 2 3.由于padding会撑大盒子，所以父盒子的宽高要减去对应的padding值 <!DOCTYPE html> <html lang="zh-CN"> <head> <...
【盒子水平垂直居中的三种（四种）方式】
weixin_52452081的博客
04-17 1447
父盒子使用相对定位,子盒子使用绝对定位,利用top:50% left:50% 让子盒子相距父盒子上边界,左边界宽高的50% 利用 margin-top margin-left返回子盒子自身宽高的50%margin: auto;和 margin-top:;/* 相当于父盒子高度的50% *//*相对于父盒子宽度的50%*//*向上走回自身高度的一半*//*向左走回自身宽度的一半*//* 距离上侧150px *//* 距离左侧300px *//* x轴居中 *//* y轴居中 */
CSS小盒子和大盒子中水平垂直居中的办法
mianmami的博客
06-17 699
方法一：padding 通过设置大盒子的padding属性和box-sizing属性，将小盒子挤到居中的位置。 <html > <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin: 0; padding: 0} .out{ height: 500px;
html子div垂直居中,div内的div水平垂直居中方式
weixin_34666364的博客
06-17 143
第一种情况：不确定宽高在父级元素用padding确定上下居中在子级元素用margin确定左右居中.dad{border:1pxsolid;padding:100px0;}.son{border:5pxsolidred;width:100px;margin:0auto;}第二种情况：div的高度确定(全屏情况)方法一：子级元素高度要确定的情况用positi...
css居中对齐的几种方式
袁成新（Chauncey Yuan）
10-13 745
第一种 css .parent { width: 300px; height: 300px; background: #fff000; display: table-cell; vertical-align: middle; text-align: cen...
div水平垂直居中的四种方式
qq_57443373的博客
09-08 3万+
让div水平居中的方式，我所知道的就是以下这四种。 文章目录一、margin二、绝对定位三、子元素绝对定位父元素相对定位四、flex布局总结 一、margin 第一种方式我们可以利用外边距属性来使div水平垂直居中 先来看一段有问题的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d..
CSS总结div中的内容垂直居中的六种方法
susunjia的博客
07-14 4427
CSS总结div中的内容垂直居中的六种方法
div 垂直居中的六种方法
热门推荐
liufeifeinanfeng的博客
11-23 24万+
利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-align center，块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法，每一种适用于不同的情况，在实际的使用过程中选择某一种方法即可。 Line-Height Method 试用：单行文本垂直居中，demo 代码：
CSS总结div中的内容垂直居中的五种方法
qq_41425267的博客
11-03 2万+
一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果。 二、内边距（padding）法 另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如： p { padding:20px 0; }
详解html的几种水平垂直居中的方式（基础）
12-29
所以我给大家总结式的列出几种常用的水平垂直居中的方法。 第一种方法 <!--html盒子代码--> <!--水平垂直居中--> <div class=Centered1> <p>d第一种 </div> <!-css样式部分--> .Centered1{ ...
CSS文本和div垂直居中方法总结
12-13
在样式布局中，我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单：对文本，只需要对其父级元素设置text-align: center;...因此我们需要通过别的方法去实现元素的垂直居中，下面我总结了几种了常用垂直居
CSS图片响应式 垂直水平居中
01-19
4.图片始终保持水平垂直居中。 5.图片的行列数不变，这里一直都是3*3. 下面来搞定一个个要求。 满足要求1意味着这里要尽量不使用高级浏览器才有的属性，比如高级浏览器居中常用的什么 display:table-cell;vertical-...
div垂直方向布局
softlipaaa的博客
07-01 1242
div垂直方向布局知识点汇总1、2、溢出3、overflow 知识点汇总 1、 a）默认情况下（未设置高度时）父元素的高度被内容撑开 2、溢出 b）子元素是在父元素的内容区中排列的，若子元素的大小超过了父 元素，则子元素会从父元素中溢出 3、overflow c）使用 overflow 属性来设置父元素如何处理溢出的元素 overflow-x 单独处理水平方向的 overflow-y 单独处理垂直方向的 可选值： visible（默认值），子元素会从父元素中溢出，在父元素外部的位置显示 hidden，
如何实现一个div垂直居中（至少3种方法）
yf18040578780的博客
09-11 3173
如何实现一个div垂直居中（至少3种方法）
5种div 内容水平垂直居中方法
等花开一起压花路
05-25 1万+
以上五种方法都能实现 div 中内容的水平垂直居中，具体使用哪种方法可以根据具体的项目需求和适用场景来决定。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。
div中的内容垂直居中的五种方法
夜空中最亮的星
06-19 893
div中的内容垂直居中的五种方法 一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： 1 p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达
让div水平垂直居中的六种方法
一只琪琪子的博客
09-04 5665
** 方法一：绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;） ** ** 方法二：绝对定位方法：确定了当前div的宽度，margin值为当前div宽度一半的负值。 ** ** 方法三：绝对定位方法：绝对定位下top left right bottom 都设...
div 文字垂直居中
最新发布
09-24
### 回答1： 可以通过以下样式实现 div 中文字的垂直居中： ``` div { display: flex; justify-content: center; align-items: center; } ``` 其中，`display: flex;` 将 div 元素设为弹性盒子，`justify-content: center;` 居中水平方向上的元素，`align-items: center;` 则居中垂直方向上的元素。这样就可以实现文字的垂直居中了。 ### 回答2： 要使 div 中的文字垂直居中，可以使用如下方法： 1. 使用 flexbox：给 div 设置 display: flex; 和 align-items: center; 属性，这将使 div 内的内容垂直居中。 2. 使用 line-height：给 div 设置一个固定的高度，并将 line-height 设置与该高度相等，这将使文字在 div 内垂直居中。 3. 使用 table-cell：将 div 设置为 display: table-cell;，同时将其父容器设置为 display: table; 并添加 vertical-align: middle; 属性。这样，文字就会在 div 内垂直居中。 4. 使用绝对定位：将 div 设置为 position: relative;，并为文字内容添加 position: absolute; 和 top: 50%; transform: translateY(-50%);。这将使文字在 div 中垂直居中。 其中，flexbox 是最常用和推荐的方法，因为它支持更广泛的浏览器，并且可以轻松地实现垂直居中效果。其他方法在特定情况下也可以使用。 ### 回答3： 要让一个 div 元素中的文字垂直居中，可以使用以下方法： 1. 使用 flexbox 布局：将 div 的 display 属性设置为 flex，然后使用 align-items: center 来垂直居中文字。例如： ```css div { display: flex; align-items: center; } ``` 2. 使用 table-cell 布局：将 div 的 display 属性设置为 table-cell，并且设置 vertical-align 属性为 middle，来实现文字的垂直居中。例如： ```css div { display: table-cell; vertical-align: middle; } ``` 3. 使用 line-height 属性：将 div 的高度设置为与容器相同的高度，并将 line-height 属性设置为该高度的值，来使文字在垂直居中。例如： ```css div { height: 100px; /* 容器高度 */ line-height: 100px; } ``` 这些方法可以确保 div 元素中的文字垂直居中显示。根据具体的布局需求和情况，选择合适的方法来实现文字的垂直居中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值