`
fengzheng0603
  • 浏览: 72877 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

6种不同的CSS实现垂直水平居中

    博客分类:
  • CSS
阅读更多

 

    6种不同的CSS实现垂直水平居中:

  

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Custom Analytics Model</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: #cccccc; 
            margin-top: 10px;
        }

        .box1{
            display: table-cell;
            vertical-align: middle;
            text-align: center;      
        }
        .box1 span{
            display: inline-block;
        }

        .box2{
            display: flex;
            justify-content:center;
            flex-direction:column;
            text-align: center;
        }

        .box3{position:relative;}
        .box3 div{
            position: absolute;
            top:50%;
            left:50%;
            width:100%;
            transform:translate(-50%,-50%);
            text-align: center;
        }
        .box3 span{
            display: inline-block;
        }


        .box4{
            text-align:center;
            font-size:0;
        }
        .box4 div{
            vertical-align:middle;
            display:inline-block;
            font-size:16px;
        }
        .box4 span{
            display: inline-block;
        }
        .box4:after{
            content:'';
            width:0;
            height:100%;
            display:inline-block;
            vertical-align:middle;
        }


        .box5{
            display: flex;
            text-align: center;
        }
        .box5 div{
            margin: auto;
        }
        .box5 span{
            display: inline-block;
        }



        .box6{
            display: -webkit-box;
            -webkit-box-pack:center;
            -webkit-box-align:center;
            -webkit-box-orient: vertical;
            text-align: center;
        }
        .box6 span{
            display: inline-block;
        }

    </style>
</head>
<body style="background-color: #f9fafc; margin:0px;">
<div class="box box1">
        <span>1垂直居中垂直居中垂直居中垂直居中垂直居中</span>
        <span>垂直居中</span>
</div>

<div class="box box2">
        <span>2垂直居中垂直居中垂直居中垂直居中垂直居中</span>
        <span>垂直居中</span>
</div>

<div class="box box3">
    <div>
        <span>3垂直居中垂直居中垂直居中垂直居中垂直居中</span>
        <span>垂直居中</span>
    </div>
</div>


<div class="box box4">
    <div>
        <span>4垂直居中垂直居中垂直居中垂直居中垂直居中</span>
        <span>垂直居中</span>
    </div>
</div>


<div class="box box5">
    <div>
        <span>5垂直居中垂直居中垂直居中垂直居中垂直居中</span>
        <span>垂直居中</span>
    </div>
</div>

<div class="box box6">
        <span>6垂直居中垂直居中垂直居中垂直居中垂直居中</span>
        <span>垂直居中</span>
</div>

</body>
</html>

     

  • 大小: 56.5 KB
分享到:
评论

相关推荐

    CSS 实现盒子水平居中、垂直居中和水平垂直居中….docx

    CSS 盒子水平居中、垂直居中和水平垂直居中的实现方法 在 CSS 中,实现盒子水平居中、垂直居中和水平垂直居中是非常常见的需求。本文将介绍五种不同的方法来实现这些效果,并对每种方法的优缺点进行分析。 一、...

    CSS实现完美垂直居中 - 蓝色理想

    CSS Grid布局允许更精细的控制,使用`align-items: center`和`justify-items: center`,或者`grid-template-areas`配合特定的占位符,可以实现元素的垂直和水平居中。 7. **使用伪元素进行居中**: 有时可以通过...

    div+css垂直居中和水平居中

    在网页设计中,实现元素的垂直居中和水平居中是一项常见的需求,这涉及到CSS布局技术。本篇文章将深入探讨如何使用div+css方法来实现这一目标。在现代Web开发中,div元素作为布局容器广泛使用,而CSS则是样式控制的...

    DIV+CSS水平垂直居中

    本文将详细介绍DIV+CSS水平垂直居中的方法和实现原理。 一、使用position:absolute实现水平垂直居中 使用position:absolute可以将DIV元素水平垂直居中,方法是将DIV元素的left和top属性设置为50%,然后通过margin-...

    CSS 图片水平垂直居中于DIV

    总之,实现CSS中的图片水平垂直居中是一个常见的挑战,但通过理解不同的布局模式和定位方式,我们可以灵活地选择合适的方法来解决这个问题。无论是在简单的网页还是复杂的响应式设计中,这些技巧都将大有裨益。

    DIV+CSS 图片垂直居中效果

    综上所述,"DIV+CSS 图片垂直居中效果"可以通过多种方法实现,具体选择哪种取决于项目需求、浏览器兼容性和响应式设计的需求。在提供的`index.html`、`images`和`css`文件中,我们可以看到实际的代码应用和图片资源...

    css实现垂直居中

    同时,如果你想要水平居中,可以设置`justify-items: center`。例如: ```css .container { display: grid; align-items: center; justify-items: center; } ``` 3. **绝对定位** 对于固定高度的容器,你...

    图片水平垂直居中

    首先,我们可以使用CSS的Flexbox布局来实现图片的水平垂直居中。Flexbox是一个强大的容器模型,它允许我们轻松地调整子元素的布局、对齐和分布,而无需复杂的定位技巧。 1. 创建一个包含图片的容器: ```html `...

    [css]实现垂直居中水平居中的几种方式 - 霪霖笙箫 - 博客园1

    "CSS 实现垂直居中水平居中的几种方式" CSS 中实现垂直居中水平居中的几种方式是非常重要的,以下是几种常见的实现方式: 1. 容器内(Within Container) 在容器内实现垂直居中水平居中可以通过设置容器的 ...

    css图片垂直居中

    以上就是CSS实现图片垂直居中的几种常见方法。在实际开发中,应根据项目需求和浏览器兼容性选择合适的方法。对于老旧的浏览器,可能需要采用更传统的解决方案,如使用`table-cell`或JavaScript辅助。同时,随着技术...

    CSS实现垂直居中的5种方法.rar

    如果想要同时垂直和水平居中,可以使用`place-items: center;`。 ```css .container { display: grid; place-items: center; } ``` 3. **绝对定位** 对于固定尺寸的元素,可以使用绝对定位实现垂直居中。...

    CSS解决未知高度的DIV垂直居中

    #### CSS垂直居中原理 在CSS中,`vertical-align`属性主要用于设置行内元素或表格单元格中的内容垂直对齐方式。但是,当涉及到块级元素时,这个属性并不起作用。因此,我们需要采用其他技术来达到垂直居中的目的。...

    CSS2.1如何让块元素垂直水平居中.rar

    在网页设计中,让元素在页面上垂直和水平居中是一项常见的需求,特别是在CSS2.1规范中。本文将深入探讨如何使用CSS2.1来实现这一目标,无论是对于已知宽高还是未知宽高的块级元素(div)。首先,我们需要理解CSS布局...

    图层中图片垂直水平居中

    以上就是实现图层中图片垂直水平居中的几种常见CSS方法。根据实际项目需求和浏览器兼容性,选择合适的方法。在实践过程中,还可以结合媒体查询(media queries)来确保在不同屏幕尺寸下仍能保持良好的居中效果。

    css水平垂直居中

    通过以上步骤,我们可以成功地实现了一个能够适应不同屏幕尺寸、内容自动水平垂直居中的 CSS 效果。这种方法不仅适用于固定尺寸的元素,也适用于动态变化的内容,是一种非常实用且灵活的布局技巧。

    div框水平垂直居中跟内容垂直居中.html

    div框水平垂直居中跟内容垂直居中

    css实现垂直居中的方法

    ### CSS 实现垂直居中的五种方法 在前端开发中,如何使元素在页面中垂直居中是一项常见的需求。本文将详细介绍五种不同的方法来实现这一目标,并对每种方法的特点进行分析,以便开发者根据实际情况选择最合适的方案...

    js实现水平垂直居中

    总结,JavaScript结合CSS布局技术可以实现各种情况下的水平垂直居中,包括固定宽高的元素、自适应大小的元素以及响应式布局下的居中。具体使用哪种方法,取决于项目需求和浏览器兼容性考虑。在实际应用中,还可以...

    css垂直水平居中6种方式

    这里实现了比较常用的垂直水平居中的方案,十分有用,希望对于面试必考题来说,只要熟练掌握前面三种,基本上是没有问题了,源码我会放在本人主页的资源里面,供大家免费下载,创作不易,关注一下,后续将带来vue...

    在DIV中图片垂直/水平居中(最简单方法).rar

    以上就是使用CSS(特别是Flexbox和Grid布局)以及JavaScript实现图片在div中垂直/水平居中的方法。这些技巧不仅适用于图片,还可以应用于其他类型的元素,提高了网页布局的灵活性和可维护性。在实际项目中,应根据...

Global site tag (gtag.js) - Google Analytics