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

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

一.水平居中

行内元素水平居中的方法,我们使用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.mzph.cn/news/170136.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

夜神模拟器 burp抓包 ADB 微信小程序

夜神模拟器 burp抓包 ADB 微信小程序 初始环境准备应用连接证书转换设置夜神模拟器环境ADB配置测试burp抓包 初始环境准备 既然想了解如何抓包&#xff0c;我想大多数是已经安装好 夜神模拟器 和 Burp 了&#xff0c;这里就不在赘述&#xff0c;直接开始操作。 openssl 的下载…

module java.base does not “opens java.io“ to unnamed module

环境 如上图所示&#xff0c; Runtime version的版本是JAVA 17 项目所需要JDK版本为JAVA 8 解决

Alibaba Cloud Linux 3安装Docker

进行docker安装&#xff08;以社区版为例&#xff09; 添加docker-ce的dnf源 dnf config-manager --add-repohttps://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo2.安装Alibaba Cloud Linux 3专用的dnf源兼容插件 dnf -y install dnf-plugin-releasever-adap…

⑦【Redis GEO 】Redis常用数据类型:GEO [使用手册]

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ Redis GEO ⑦Redis GEO 基本操作命令1.geoadd …

Ubuntu系统安装docker

1.检查是否安装老版本 检查卸载老版本docker ubuntu下自带了docker的库&#xff0c;不需要添加新的源。 但是ubuntu自带的docker版本太低&#xff0c;需要先卸载旧的再安装新的。 apt-get remove docker docker-engine docker.io containerd runc 如果不能正常卸载&#x…

如何通过 Al 的能力提升编程的效率?

通过人工智能&#xff08;AI&#xff09;的技术&#xff0c;可以提升编程效率和能力。以下是一些建议和方法&#xff1a; 代码自动生成&#xff1a;使用AI技术&#xff0c;可以根据程序员的需求和输入&#xff0c;自动生成代码。这可以提高编程效率&#xff0c;减少编写代码所需…

AI换脸教程

方法一、MJ换脸大法 1.点击这个网站添加一个机器人到自己的服务器 https://discord.com/oauth2/authorize?client_id1090660574196674713&permissions274877945856&scopebot 2. /saveid 回车选择你自己的照片&#xff0c;并且在名字框命名身份&#xff0c;回车 3.…

微信小程序文件预览和下载-文件系统

文件预览和下载 在下载之前&#xff0c;我们得先调用接口获取文件下载的url 然后通过wx.downloadFile将下载文件资源到本地 wx.downloadFile({url: res.data.url,success: function (res) {console.log(数据,res);} })tempFilePath就是临时临时文件路径。 通过wx.openDocume…

Python爬虫实战-批量爬取豆瓣电影排行信息

大家好&#xff0c;我是python222小锋老师。 近日锋哥又卷了一波Python实战课程-批量爬取豆瓣电影排行信息&#xff0c;主要是巩固下Python爬虫基础 视频版教程&#xff1a; Python爬虫实战-批量爬取豆瓣电影排行信息 视频教程_哔哩哔哩_bilibiliPython爬虫实战-批量爬取豆瓣…

每日一题(LeetCode)----链表--链表中的下一个更大节点

每日一题(LeetCode)----链表–链表中的下一个更大节点 1.题目&#xff08;1019. 链表中的下一个更大节点&#xff09; 给定一个长度为 n 的链表 head 对于列表中的每个节点&#xff0c;查找下一个 更大节点 的值。也就是说&#xff0c;对于每个节点&#xff0c;找到它旁边的第…

停车管理系统

1 用户信息管理 2 车位信息管理 3 车位费用设置 4 停泊车辆查询 5 车辆进出管理 6 用户个人中心 7 预定停车位 8 缴费信息 9 业务逻辑详解 1 用户停车&#xff1a;user用户登录&#xff0c;在预定停车位菜单&#xff0c;选择一个车位点击预定即可 2 车辆驶出&#xff1a;admin…

【ArcGIS Pro微课1000例】0038:基于ArcGIS Pro的人口密度分析与制图

文章目录 一、人口密度二、人口密度分析1. 点密度分析2. 核密度分析三、结果比对一、人口密度 人口密度是指单位土地面积上居住的人口数,通常以每平方千米或每公顷内的常住人口为单位计算。人口密度同资源、经济密切结合,因此,科学准确地分析人口密度的分布情况,对合理制定…

kubernetes使用nfs创建pvc部署mysql stateful的方法

kubernetes创建的pod默认都是无状态的&#xff0c;换句话说删除以后不会保留任何数据。 所以对于mysql这种有状态的应用&#xff0c;必须使用持久化存储作为支撑&#xff0c;才能部署成有状态的stateful. 最简单的方法就是使用nfs作为网络存储&#xff0c;因为nfs存储很容易被…

无需公网IP,使用MCSM面板一键搭建我的世界Minecraft服务器联机游戏

文章目录 前言1.Mcsmanager安装2.创建Minecraft服务器3.本地测试联机4. 内网穿透4.1 安装cpolar内网穿透4.2 创建隧道映射内网端口 5.远程联机测试6. 配置固定远程联机端口地址6.1 保留一个固定TCP地址6.2 配置固定TCP地址 7. 使用固定公网地址远程联机 前言 MCSManager是一个…

基于springboot网上超市管理系统

基于springboot网上超市管理系统 摘要 随着互联网的快速发展&#xff0c;电子商务行业迎来了蓬勃的发展&#xff0c;网上超市作为电子商务的一种形式&#xff0c;为消费者提供了便利的购物体验。本文基于Spring Boot框架&#xff0c;设计和实现了一个网上超市管理系统&#xff…

图的邻接矩阵,邻接表的C语言实现(408真题)

图的邻接矩阵 数据结构定义 #define MAXV 50;//顶点数目的最大值 typedef struct{int vex[MAX]; //顶点表 int edge[MAXV][MAXV]; //邻接矩阵 int edgeNum,vexNum; //图中实际的边数和顶点数 }MGraph;初始化 void Matrix_Init(MGraph *Mgraph) {int v1, v2;//存储有边的…

Redis key的类型以及命令

系列文章目录 第一章 Java线程池技术应用 第二章 CountDownLatch和Semaphone的应用 第三章 Spring Cloud 简介 第四章 Spring Cloud Netflix 之 Eureka 第五章 Spring Cloud Netflix 之 Ribbon 第六章 Spring Cloud 之 OpenFeign 第七章 Spring Cloud 之 GateWay 第八章 Sprin…

[AutoSAR 存储] 汽车智能座舱的存储需求

公知及经验整理&#xff0c;原创保护&#xff0c;禁止转载。 专栏 《AutoSAR 存储》 <<<< 返回总目录 <<<< 1 智能座舱的发展&#xff1a; 1.1 发展历史 车辆信息娱乐系统的发展可以分为三个阶段。 机械化阶段 在上世纪90年代&#xff0c;车辆仪表盘…

动手学深度学习(四)---多层感知机

文章目录 一、理论知识1.感知机2.XOR问题3.多层感知机4.多层感知机的从零开始实现 【相关总结】1.torch.randn()2.torch.zeros_like() 一、理论知识 1.感知机 给定输入x,权重w&#xff0c;和偏移b,感知机输出&#xff1a; 2.XOR问题 感知机不能拟合XOR问题&#xff0c;他…

【2023 云栖】阿里云田奇铣:大模型驱动 DataWorks 数据开发治理平台智能化升级

云布道师 本文根据 2023 云栖大会演讲实录整理而成&#xff0c;演讲信息如下&#xff1a; 演讲人&#xff1a;田奇铣 | 阿里云 DataWorks 产品负责人 演讲主题&#xff1a;大模型驱动 DataWorks 数据开发治理平台智能化升级 随着大模型掀起 AI 技术革新浪潮&#xff0c;大数…