CSS 水平垂直居中

最新推荐文章于 2024-06-03 18:53:48 发布
最新推荐文章于 2024-06-03 18:53:48 发布
阅读量135 收藏
点赞数
分类专栏： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yang__k/article/details/105223921
版权 
</head>

<style>

    #bl{
        position: relative;
    }
    .kk{
      height: 100px;
       width: 500px;
    }
    .f1{
       font-size: 26px;
    }

    .d1{
       background: rgb(101, 165, 42);
    }
    .s1{
        line-height: 100px;
    }

    .d9{
       background: rgb(116, 42, 165);
       text-align: center;
    }
    .s9{
        /* display: inline; */
    }

    .d10{
       background: rgb(21, 109, 26);
       position: relative;
    }
    /* 在已知长度的情况下margin一半的长度 */
    .s10{
        position: absolute;
        left: 50%;
        margin-left: -70px;
    }

    .d11{
       background: rgb(10, 44, 236);
       display: flex;
       justify-content: center;

    }
    .s11{

    }

    .d2{
       background: rgb(165, 153, 42);
       position: relative;
    }
    .s2{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .d12{
       background: rgb(233, 156, 12);
       display: table-cell;
       vertical-align:middle;

    }
    .s12{
       
    }

    .d13{
       background: rgb(9, 16, 105);
       position: relative;
    }
    /* 在已知高度的情况下margin一半的长度 */
    .s13{
       position: absolute;
       top: 50%;
       margin-top: -22px;
    }

    .d14{
       background: rgb(238, 14, 238);
       position: relative;
    }
    .s14{
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
    }

    .d15{
       background: rgb(9, 240, 190);
       position: relative;
       display: flex;
       align-items: center;
    }
    .s15{
       
    }

    .d3{
       background: rgb(42, 120, 165);
       text-align: center;
    }
    .s3{
       line-height: 100px;
    }

    .d4{
       position: absolute;
       background: rgb(165, 61, 42);
       text-align: center;
       /* 垂直居中 */
       top:0;
       right:0;
       left:0;
       bottom:0;
       margin:auto;
    }
    .s4{
       line-height: 100px;
    }

    .d5{
       background: rgb(140, 42, 165);
       text-align: center;
       top:0;
       right:0;
       left:0;
       bottom:0;
       margin:auto;
    }
    .s5{
       line-height: 100px;
    }

    .d6{
       background: rgb(178, 241, 75);
       text-align: center;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%,-50%);
    }
    .s6{
       line-height: 100px;
    }

    .d7{
       background: rgb(140, 42, 165);
       text-align: center;
       display: grid;
       
    }
    .s7{
       line-height: 100px;
       align-self: center;
       justify-self: center;
    }

    .d8{
       background: rgb(165, 42, 83);
       text-align: center;
       position: absolute;
       top: 50%;
       left: 50%;
       /* 分别为宽和高的一半 */
       margin-left: -250px;
       margin-top: -50px;
       
    }
    .s8{
       line-height: 100px;
    }

</style>
<body>
    <div id="bl">
        <!--div中文字水平居中-->
        <div class="d1 kk">
        <span class="s1 f1">ABCDEFG1</span>
        </div>
        <div class="d9 kk">
         <span class="s9 f1">ABCDEFG9</span>
         </div>
        <div class="d10 kk">
         <span class="s10 f1">ABCDEFG10</span>
         </div>
        <div class="d11 kk">
         <span class="s11 f1">ABCDEFG11</span>
         </div>


        <!-- div中文字垂直居中 -->
        <div class="d2 kk">
        <span class="s2 f1">ABCDEFG2</span>
        </div>
        <div class="d12 kk">
         <span class="s12 f1">ABCDEFG12</span>
         </div>
        <div class="d13 kk">
         <span class="s13 f1">ABCDEFG13</span>
         </div>
        <div class="d14 kk">
         <span class="s14 f1">ABCDEFG14</span>
         </div>
        <div class="d15 kk">
         <span class="s15 f1">ABCDEFG15</span>
         </div>


        <!-- div中文字垂直水平居中 -->
        <div class="d3 kk">
        <span class="s3 f1">ABCDEFG3</span>
        </div>
        

        <!-- div水平居中 -->
        <div class="d5 kk">
         <span class="s5 f1">ABCDEFG5</span>
         </div>


        <!-- div垂直水平居中 -->
        <div class="d4 kk">
        <span class="s4 f1">ABCDEFG4</span>
        </div>
        <div class="d6 kk">
        <span class="s6 f1">ABCDEFG6</span>
        </div>
        <div class="d7 kk">
        <span class="s7 f1">ABCDEFG7</span>
        </div>
        <div class="d8 kk">
        <span class="s8 f1">ABCDEFG8</span>
        </div>

    </div>
</body>

 

 

 

sunny.day
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html的小项目,html+css常用小项目
weixin_27603469的博客
06-17 337
html结构：东邪西毒南乞北丐CSS代码：.wrapper{width:100px;height:100px;background:lightblue;border-radius:50%;border:2px solid lightgreen;position: absolute;top:200px;left:400px;cursor:pointer;}.wrapper:after{content...
16种CSS水平垂直居中方法
weixin_45709829的博客
03-22 3万+
16种css水平垂直居中方法以及应用（文字、图片） 一、垂直居中 1、行内元素 基本思想：单行文本子元素line-height 值为父元素 height 值 .parent { height: 200px; } .son { line-height: 200px; } 2、块级元素 2.1行内块级元素 基本思想：元素是行内块级，使用display: inline-block, vertical-align: middle+伪元素处于容器中央 兼容性：支持IE7 .parent::afte
CSS水平垂直居中
qq_51130780的博客
01-14 612
CSS中常见的水平垂直居中的方案
css元素水平垂直居中
最新发布
博哥的二进制世界
06-03 1261
/图片与文字垂直居中，但会有少量偏差，再通过。在应用一的基础上，给子项（元素） 添加 vertical-align: middle;//子元素相对父元素水平（主轴）居中。//子元素相对父元素垂直（交叉轴）居中。这种写法，在没有指定子元素宽高的情况下，也能让其在父容器中垂直居中。//给父元素加，弹性布局。margin-left:- 自身宽度一半;margin-top:-自身高度一半;
css水平垂直居中四种常用方式
CSDdas的博客
05-10 3887
css水平垂直居中四种常用方式
css 水平垂直居中
zzzzoe_的博客
01-15 773
相对于页面对块元素进行垂直居中 .login { position: absolute;; width: 5rem; top: 50%; left: 50%; transform: translate(-50%,-50%); }
CSS水平垂直居中常见方法总结
小牛肉_
12-02 11万+
css元素水平垂直居中
CSS常用水平垂直居中的几种方法
qq_33721778的博客
12-28 2万+
CSS水平垂直居中一、利用margin:auto二、利用position: absolute三级目录 一、利用margin:auto 元素有宽度和高度时，利用margin:auto设置元素水平垂直居中： HTML代码如下： <div class="div1"> <div class="center"></div> </div> CSS代码如下： .div1 { background-color: #eee; width: 200px; hei
CSS 水平垂直居中的方式
专注于大数据方向，区块链，前后端，数据可视化，人工智能等领域
06-02 1319
在实际使用最好测试下最低版本是否支持对应的实现方式，尽量选各个浏览器支持比较好的，或者最常见的实现方式。浏览器兼容性：最新主流浏览器基本上兼容，对于老版本浏览器可能会有兼容性问题。兼容性：基本都支持，只是书写起来比较繁琐，多层嵌套。浏览器兼容性：主流浏览器基本上都支持的。
【Web】CSS水平垂直居中常见方法总结
沙师弟专栏
05-05 2万+
文章目录一、简介二、元素水平居中三、元素水平垂直居中3.1 position 元素已知宽度3.2 position transform 元素未知宽度3.3 flex布局3.4 table-cell布局 一、简介 说明：本篇文章只是总结一些方法，例子用到的各个元素属性不做解释，详情请看MDN文档，非常的详尽，例子在chrome浏览器下完全好使，IE这个渣渣。 本文出现的错误，请大佬们及时指正，人非圣...
CSS水平垂直居中的几种方法总结
09-24
CSS水平垂直居中技术是指在网页布局过程中，对页面中的一个或多个元素进行位置安排，使其在容器中水平和垂直方向上都处于中心位置的技术。水平垂直居中是Web前端开发中非常常见和重要的布局技巧，它能提高页面的视觉...
CSS水平垂直居中解决方案(6种)
09-24
以下将详细介绍六种不同的CSS水平垂直居中解决方案： 1. **绝对定位+margin负值法** 当你知道元素的宽度时，可以使用这种方法。首先，设置父元素为相对定位，然后子元素使用绝对定位，将其left和top属性设置为50%...
css水平垂直居中
06-11
### CSS 水平垂直居中的实现方法 在前端开发中，经常需要将元素在页面中进行水平垂直居中处理，特别是在响应式布局或者需要精确控制元素位置的情况下尤为重要。本篇文章将详细介绍如何通过 CSS 实现内容的水平垂直...
使用css实现div垂直居中的示例
09-25
本示例将详细解释如何使用CSS来实现`div`元素的垂直居中。 首先，我们要理解CSS布局的基本概念。在网页中，元素的位置可以通过设置`position`属性来控制，其主要值有`static`（默认值）、`relative`、`absolute`和`...
解决申请 Googl e账号填写电话号码不能验证的问题
热门推荐
sunny_day的博客
06-23 37万+
使用google账号的好处是不管在哪里，只用在chorm登录google浏览器你自己收藏的书签和扩展工具都会同步，对于开发人员来说是非常好用的。 方法很简单：用手机自带的电子邮件申请，按流程走，稳稳的。 1.点击添加邮箱 2.点击GMail 3.,随便输入一些东西，点击下一步 4.点击注册账号 5.按上面的注册即可 ...
echarts 堆叠图和重叠图及图例的位置
sunny_day的博客
03-12 2万+
1.在series: [ ],里面设置 stack:"1", 如果两组的 stack一樣就會堆疊 ; 2.在series: [ ],里面设置barGap: '-100%',即为重叠; 3.图例位置: legend: { // data:this.b, data:["總人數","應到人數"], ...
iview table expanded 展开收缩
sunny_day的博客
12-25 1万+
给table设置type:expand,可以使table展开收缩. this.data1[index]._expanded = true/false; 使用这句代码可以使其展开关闭.当然在改变后要刷新渲染. 可以使用vue,vm.$forceUpdate(); 但经过使用不起作用,就用了splice()方法,也达到同样效果. h( ...
获取元素在屏幕的相对位置
sunny_day的博客
01-25 5324
 element 为当前想获得位置的元素 // 获取提交按钮的位置 getPosition(element){ // var box = document.getElementById("commit"); // var pos = box.getBound...
datepicker 的on-change传多个参问题
sunny_day的博客
10-15 2664
1.on-change 默认返回当前选择的日期 <date-picker v-else placeholder="請選擇日期" style="width:118px" v-model="stages.plan_end_time" @on-change="dateChange2"> </date-picker>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值