CSS水平居中与垂直居中的方法

news2024/12/26 10:39:53

当我们页面布局的时候，通常需要把某一个元素居中，这一篇文章为大家介绍一下居中的几种方法，本人文笔有限，请见谅！

一.水平居中

行内元素水平居中的方法，我们使用text-align:center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平居中</title>
    <style>
        .box {
            /* 给块元素设置宽高 */
            width: 300px;
            height: 50px;
            background-color: orange;
            /* 水平居中 */
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>我是需要水平居中的文字</span>
    </div>
</body>
</html>

在这里插入图片描述
块元素水平居中的方法
1.margin(外边距)的方法来做，使用margin:0 auto；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平居中</title>
    <style>
        .box {
            /* 给块元素设置宽高 */
            width: 300px;
            height: 50px;
            background-color: orange;
            margin: 0 auto; 
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

请添加图片描述

2.使用absolute加margin-left的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平居中</title>
    <style>
        .box {
            /* 给加一个绝对定位 */
            position: absolute;
            /* 向右百分之50 */
            left: 50%;
            /* 外边距再减自身宽度的一半 */
            margin-left: -150px;
            /* 给块元素设置宽高 */
            width: 300px;
            height: 50px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box">我是定位加margin</div>
</body>
</html>

在这里插入图片描述
3.使用absolute加transform

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平居中</title>
    <style>
        .box {
            /* 给加一个绝对定位 */
            position: absolute;
            /* 向右百分之50 */
            left: 50%;
            /* 横向上向左移动自身宽度的一半 */
            transform: translateX(-50%);
            /* 给块元素设置宽高 */
            width: 300px;
            height: 50px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box">我是定位加transform</div>
</body>
</html>

在这里插入图片描述
4.flex弹性盒子方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平居中</title>
    <style>
      .father {
        width: 400px;
        height: 400px;
        background-color: orange;
        /* 给父级开启弹性盒子 */
        display: flex;
        /* 主轴对齐方式 */
        justify-content: center;
      }
      .son {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

在这里插入图片描述

二.垂直居中

行内元素垂直居中，使用line-height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中</title>
    <style>
        .box {
            width: 300px;
            height: 50px;
            background-color: orange;
            /* 行高等于全部高度 */
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div class="box"><span>我是垂直居中</span></div>
</body>
</html>

在这里插入图片描述

块元素垂直居中方法：
1.使用absolute加margin-top的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中</title>
    <style>
        .boss {
            position: relative;
            width: 300px;
            height: 200px;
            background-color: pink;
        }
        .box {
            /* 给加一个绝对定位 */
            position: absolute;
            /* 向下百分之50 */
            top: 50%;
            /* 外边距再减自身高度的一半 */
            margin-top: -25px;
            /* 给块元素设置宽高 */
            width: 300px;
            height: 50px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="boss">
        <div class="box">我是定位加margin</div>
    </div>
</body>
</html>

在这里插入图片描述

2.flex方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平居中</title>
    <style>
      .father {
        width: 400px;
        height: 400px;
        background-color: orange;
        /* 给父级开启弹性盒子 */
        display: flex;
        /* 侧轴对齐方式 */
        align-items: center;
      }
      .son {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

在这里插入图片描述
3.使用absolute加transform

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中</title>
    <style>
        .boss {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .box {
            /* 给加一个绝对定位 */
            position: absolute;
            /* 向下百分之50 */
            top: 50%;
            /* 横向上向上移动自身宽度的一半 */
            transform: translateY(-50%);
            /* 给块元素设置宽高 */
            width: 300px;
            height: 50px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="boss">
        <div class="box">我是定位加transform</div>
    </div>
</body>
</html>

在这里插入图片描述
感谢大家的阅读，如有什么不对的地方，可以向我提出，感谢大家！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1251187.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

市场被套牢，没有了解积累和分配，昂首资本一一介绍

市场被套牢，没有了解积累和分配，昂首资本一一介绍

很多投资者对市场中的积累和分配的概念不是很清楚&#xff0c;下面昂首资本将一一介绍。 积累意味着尽可能多地买入筹码&#xff0c;而不大幅抬高价格&#xff0c;直到在你买入时的价格水平上没有或几乎没有筹码。这种买入通常发生在市场熊市之后&#xff0c;此时有最佳买入价…
阅读更多...
枚举与应用

枚举与应用

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 枚举简介 枚举是一种特…
阅读更多...
软件测试：超详细的Jmeter基础教程

软件测试：超详细的Jmeter基础教程

JMeter 介绍&#xff1a; 一个非常优秀的开源的性能测试工具。 优点&#xff1a;你用着用着就会发现它的重多优点&#xff0c;当然不足点也会呈现出来。 从性能工具的原理划分 Jmeter工具和其他性能工具在原理上完全一致&#xff0c;工具包含4个部分&#xff1a; &#xff…
阅读更多...
是否有无限提取的代理IP？作为技术你需要知道这些

是否有无限提取的代理IP？作为技术你需要知道这些

最近有互联网行业的技术小伙伴问到&#xff0c;有没有可以无限提取的代理IP&#xff1f;就是比如我一秒钟提取几万、几十万次&#xff0c;或者很多台机器同时调用API提取链接&#xff0c;这样可以吗&#xff1f;看到这个问题&#xff0c;不禁沉思起来&#xff0c;其实理论上是存…
阅读更多...
Apriori算法和FpGrowth算法图解演示

Apriori算法和FpGrowth算法图解演示

Apriori算法 FpGrowth算法
阅读更多...
数据结构与算法编程题23

数据结构与算法编程题23

设计二叉树的双序遍历算法&#xff08;双序遍历是指对于二叉树的每一个结点来说&#xff0c;先访问这个结点&#xff0c;再按双序遍历它的左子树&#xff0c;然后再一次访问这个结点&#xff0c;接下来按双序遍历它的右子树&#xff09; #define _CRT_SECURE_NO_WARNINGS#inclu…
阅读更多...
【点云surface】Poisson表面重建

【点云surface】Poisson表面重建

1 介绍 Poisson表面重建算法是一种用于从点云数据生成平滑曲面模型的算法。它基于Michael Kazhdan等人在2006年发表的论文《Poisson surface reconstruction》。该算法通过将点云数据转换为体素表示&#xff0c;并利用Poisson方程来重建曲面。 该算法的基本原理是将点云数据转…
阅读更多...
python基础教程：动态参数

python基础教程：动态参数

前言 大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 如果有什么疑惑/资料需要的可以点击文章末尾名片领取源码 Python的动态参数有两种&#xff0c;分别是*args和**kwargs&#xff0c; 这里面的关键是一个和两个星号的区别&#xff0c;而不是args和kwargs在名字上的区别&#…
阅读更多...
微信小程序-跳转到另一个小程序

微信小程序-跳转到另一个小程序

微信小程序-跳转到另一个小程序 微信小程序跳转到另一个小程序有一个条件:这两个小程序被同一个微信公众号关联&#xff0c;否则不能跳转&#xff0c;会报错。 官方文档 wx.navigateToMiniProgram({appId: wxa38r249405b957c6,path: pages/splash/index,//extraData: 需要传递…
阅读更多...
Android : PopupWindow 悬浮框_简单应用

Android : PopupWindow 悬浮框_简单应用

示例图&#xff1a; MainActivity.java package com.example.popupwindow;import androidx.appcompat.app.AppCompatActivity;import android.content.Context; import android.graphics.drawable.ColorDrawable; import android.os.Bundle; import android.view.LayoutInflat…
阅读更多...
浅谈STL中的分配器

浅谈STL中的分配器

分配器是STL中的六大部件之一&#xff0c;是各大容器能正常运作的关键&#xff0c;但是对于用户而言确是透明的&#xff0c;它似乎更像是一个幕后英雄&#xff0c;永远也不会走到舞台上来&#xff0c;观众几乎看不到它的身影&#xff0c;但是它又如此的重要。作为用户&#xff…
阅读更多...
Vue组件的几种通信方式

Vue组件的几种通信方式

这里写目录标题 Vue组件的几种通信&#xff08;数据传递&#xff09;方式非父子组件间通信&#xff08;Bus事件总线&#xff09;介绍实例 非父子通信-provide&inject1.作用2.场景3.语法4.注意 父子组件间的通信固定props属性名&#xff08;v-model&#xff09;介绍实例 不固…
阅读更多...
【部署运维】docker：入门到进阶

【部署运维】docker：入门到进阶

0 前言 部署运维博客系列一共有三篇&#xff1a; 拥抱开源&#xff0c;将工作中的经验分享出来&#xff0c;尽量避免新手踩坑。 【部署运维】docker&#xff1a;入门到进阶 【部署运维】kubernetes&#xff1a;容器集群管理掌握这些就够了 【部署运维】pythonredisceleryd…
阅读更多...
C++多态-虚函数

C++多态-虚函数

多态分为编译时多态和运行时多态。编译时多态就是在编译阶段就能绑定要执行的那个函 数。运行时多态要等到运行到调用的那条语句时&#xff0c;根据指针/引用所绑定的对象&#xff0c;来决定执行哪 个函数&#xff0c;我们要讲的虚函数就是运行时多态&#xff0c;是 C中非常重…
阅读更多...
嵌入式的学习需要合理规划时间

嵌入式的学习需要合理规划时间

低级的欲望放纵即可获得&#xff0c;高级的欲望只有克制才能达成。——卡耐基1、粉丝的误会 很多粉丝&#xff0c;问我&#xff0c; "胡老师我想报您的培训班。" ... 得知我知识业余时间写文章&#xff0c;紧接着又会问&#xff0c; "jg单位这么清闲啊&#…
阅读更多...
带你理解H桥电路

带你理解H桥电路

H桥电路 文章目录 H桥电路前言一、H桥基本结构二、H桥原理二、控制模式三、MOS管H桥 前言 在做单片机控制小车的时候一定会用一个电机驱动板&#xff0c;这个电机驱动板是怎么做的呢&#xff0c;答案就是H桥&#xff0c;没学过电路的同学可能会问什么是H桥&#xff0c;这篇文章…
阅读更多...
【c++哈夫曼树代码实现】

【c++哈夫曼树代码实现】

哈夫曼树是不定长编码方式&#xff0c;由于是将权值大的元素放在离根结点近的地方 &#xff0c;权值小的放在离根远的地方&#xff0c;哈夫曼树效率很高&#xff0c;并且一个编码不会以另一个编码作为前缀&#xff0c;避免了编码的歧义性&#xff0c;本文将带大家探索如何创建和…
阅读更多...
SAP smartform 实现打印条形码

SAP smartform 实现打印条形码

先在SE73里定义一个新的BARCODE&#xff0c;注意一定要用新的才可以&#xff0c;旧的是打印不出来的。 然后定义一个SMARTFORM的样式&#xff0c;把你定义的BARCODE放到字符样式里面去。 再做SMARTFORM就可以了&#xff0c;将需要作为条码的变量的格式选为该BARCODE格式&…
阅读更多...
ASP.NET Core 使用 SignalR 实现实时通讯

ASP.NET Core 使用 SignalR 实现实时通讯

&#x1f433;简介 SignalR是一个用于ASP.NET的库&#xff0c;它允许服务器代码向连接的客户端实时发送推送通知。它使用WebSockets作为底层传输机制&#xff0c;但如果浏览器不支持WebSockets&#xff0c;它会自动回退到其他兼容的技术&#xff0c;如服务器发送事件&#xff…
阅读更多...
GEE：众数滤波

GEE：众数滤波

作者：CSDN @ _养乐多_ 在本文中，我们将介绍如何使用Google Earth Engine（GEE）平台对遥感影像进行众数滤波处理。并以众数滤波平滑NDVI图像为示例，演示众数滤波整个过程。 结果如下图所示， 文章目录 一、众数滤波二、完整代码三、代码链接一、众数滤波 众数滤波是一种图…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023