面试常问:水平居中和垂直居中的方法

水平居中

  1. 文本居中
    • 如果元素为行内元素,可以将父元素的text-align属性设置为center,这样子元素就会水平居中对齐
.text{text-align: center;
}
  1. 固定宽度的居中
    • 如果元素宽度已知并固定,可以通过将左右margin设置为auto来实现水平居中。
.content{margin-left:auto;margin-right:auto;
}
  1. 绝对定位和移动
    • 可以使用绝对定位和transform来实现水平居中。首先将元素的左边距和右边距都设置为auto,然后使用transform属性将元素向左平移50%。
.content{position: absolute;left: 50%;transform: translateX(-50%);
}
  1. Flexbox布局
.content{display: flex;justify-content: center;
}
  1. 表格布局
    • 将父元素的display属性设置为table-cell,并将text-align属性设置为center。
.content{display: table-cell;text-align: center;
}

垂直居中

  1. 表格布局
    • 将父元素的display属性设置为table,并将子元素的display属性设置为table-cell,然后使用vertical-align属性将子元素垂直居中
    • 未知高度的块级父子元素居中,模拟表格布局
    • 缺点:IE67不兼容,父级 overflow:hidden 失效
.parentcont {display: table;
}
.childCont {display: table-cell;vertical-align: middle;
}
  1. Flex布局
    • 将父元素的display属性设置为flex,并使用align-items属性将子元素垂直居中。
.pacon {display: flex;align-items: center;
}
  1. 绝对定位和负边距
    • 已知高度的子元素,将父元素设置为相对定位,子元素设置为绝对定位,并使用top: 50%将其垂直居中,然后通过负边距的方式将子元素向上移动一半的高度
.parentCon{position: relative;
}
.childCon {position: absolute;top: 50%;margin-top: -`100px; /* 假设子元素高度为200px的一半 */
}
  1. 文本垂直居中
    • 对于单行文本,可以设置父元素的line-height属性和高度相等,从而实现文本的垂直居中
.con{height: 50px;line-height: 50px;
}
  1. CSS3位移
    • 使用CSS3的transform属性的translateY函数将子元素向上位移一半的高度实现垂直居中
.con {position: absolute;top: 50%;transform: translateY(-50%);
}
  1. inline-block兄弟元素
    • 通过在父元素中插入一个inline-block元素,并设置其垂直对齐方式为middle来实现垂直居中
.parentCon {height: 100%;
}
.extracon {display: inline-block;vertical-align: middle;
}
.childcon {display: inline-block;vertical-align: middle;
}

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

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

相关文章

list【1】介绍与使用(超详解哦)

list的介绍与使用 引言list介绍接口使用默认成员函数迭代器容量元素访问数据修改 list的算法接口总结 引言 继vector之后,我们继续来介绍STL容器:list 对于容器的使用其实有着类似的模式,参考之前vector的使用可以让我们更快的上手&#xff…

【MySQL】2、MySQL数据库的管理

常用 describe user; Field:字段名称 Type:数据类型 Null :是否允许为空 Key :主键 Type:数据类型 Null :是否允许为空key :主键 Default :默认值 Extra :扩展属性,例如:标志符列(标识了种子,增量/步长)1 2 id:1 3 5 …

Android Jetpack组件的全方位分析

Jetpack是一个用于简化Android应用程序开发的工具包,包含了一系列的组件和工具。Jetpack包含了很多组件,如LiveData、ViewModel、Room、Data Binding、Navigation等。 Jetpack组件是一种更高级别的抽象,它们可以提供更简洁、更易于使用的API。…

self instruct 介绍

《SELF-INSTRUCT: Aligning Language Model with Self Generated Instructions》 github: self-instruct 背景 大模型表现惊人,但是严重依赖于人工编写的指令数据。然而,依靠人工标注数据成本高昂。本文中提出self-instruct框架:一种基于大…

在 React 中如何使用定时器

在React中使用定时器通常有两种方式:使用setInterval和setTimeout函数。 使用setInterval函数: 首先,在组件中导入useEffect和useState函数: import React, { useEffect, useState } from "react";在组件中声明一个状…

ES6-简介、语法

ES6 ES6简介 ​ ECMAScript 6(简称ES6)是于2015年6月正式发布的JavaScript语言的标准,正式名为ECMAScript 2015(ES2015)。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语…

Linux 常用

系统信息 查看CPU信息(型号) cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c查看物理CPU个数 cat /proc/cpuinfo | grep "physical id" | sort | uniq | wc -l查看每个物理CPU中core的个数(即核数) cat /proc/cpuinfo | grep "c…

Android创建签名文件,并获取签名文件MD5,SHA1,SHA256值

一、创建Android签名文件 使用Android Studio开发工具,可视化窗口进行创建 第一步:点击AndroidStudio导航栏上的 Build→Generate Signed Bundle / APK 第二步:选择APK选项 第三步:创建签名文件 第四步:输入创建签名的…

如何五分钟设计制作自己的蛋糕店小程序

在现如今的互联网时代,小程序已成为企业推广和销售的重要利器。对于蛋糕店来说,搭建一个小程序可以为其带来更多的品牌曝光和销售渠道。下面,我们将以乔拓云平台为例,来教你如何从零开始搭建自己的蛋糕店小程序。 首先&#xff0c…

2023/8/27周报

目录 摘要 论文阅读 1、标题和现存问题 2、过度平滑和度量方法 3、处理过坡 4、实验结果 深度学习 1、解决可视化问题 2、CART算法 总结 摘要 本周在论文阅读上,阅读了一篇Pairnorm:解决GNNS中的过平滑问题的论文。PairNorm 的核心思想是在图卷积层之间引…

CUDA和C++混合编程及CMakeLists.txt

1. 概要 首先认识一个问题,单从CMakeLists.txt的角度来看,无法同时使用两种编译器编译两种语言。不过直接编写Makefile是可以的,通过设置不同的任务,可以实现一个Makefile编译两个语言。但这不是这里要讨论的重点。 使用CUDA和C进…

7 集群基本测试

1. 上传小文件到集群 在hadoop路径下执行命令创建一个文件夹用于存放即将上传的文件: [atguiguhadoop102 ~]$ hadoop fs -mkdir /input上传: [atguiguhadoop102 hadoop-3.1.3]$ hadoop fs -put wcinput/work.txt /input2.上传大文件 [atguiguhadoop1…

Vue 3 常见面试题汇总

前端面试题库 (面试必备) 推荐:★★★★★ 地址:前端面试题库 前言 最近两年许多大厂都在实行“降本增效”、“优化组织架构”,然后“为社会输送了大量人才”,今年(2023&#xff…

视频云存储/安防监控视频智能分析网关V3:占道经营功能详解

违规占道经营者经常会在人流量大、车辆集中的道路两旁摆摊,导致公路交通堵塞,给居民出行的造成不便,而且违规占路密集的地方都是交通事故频频发生的区域。 TSINGSEE青犀视频云存储/安防监控视频/AI智能分析网关V3运用视频AI智能分析技术&…

10万字智慧政务大数据平台项目建设方案222页[Word]

导读:原文《10万字智慧政务大数据平台项目建设方案222页[Word]》(获取来源见文尾),本文精选其中精华及架构部分,逻辑清晰、内容完整,为快速形成售前方案提供参考。 1.1 项目建设目标 推进市一级政府搭建数…

求生之路2社区服务器sourcemod安装配置搭建教程centos

求生之路2社区服务器sourcemod安装配置搭建教程centos 大家好我是艾西,通过上文我们已经成功搭建了求生之路2的服务端。但是这个服务端是纯净的服务端,就是那种最纯粹的原版。如果想要实现插件、sm开头的命令等功能,需要安装这个sourcemod。…

js中的解构赋值

在JavaScript中,解构赋值是一种方便地从数组或对象中提取值并赋给变量的方法。 它允许你使用一种简洁的语法来快速访问和使用数据。 对于数组解构赋值,你可以使用方括号([])来指定变量名,并将其放在赋值语句的左侧。例…

opencv 案例实战02-停车场车牌识别SVM模型训练及验证

1. 整个识别的流程图: 2. 车牌定位中分割流程图: 三、车牌识别中字符分割流程图: 1.准备数据集 下载车牌相关字符样本用于训练和测试,本文使用14个汉字样本和34个数字跟字母样本,每个字符样本数为40,样本尺…

家政服务行业搭建小程序的实用技巧分享

随着移动互联网的发展,小程序成为了各行各业的新宠。对于家政服务行业来说,搭建一个小程序商城可以极大地提升服务的便捷性和用户体验,同时也能提高企业的竞争力。本文将分享家政服务行业搭建小程序的实用技巧,帮助您顺利创建属于…

Docker 常用服务 安装使用 教程

Docker安装常用服务 1、 安装mysql # 1.拉取mysql镜像到本地 docker pull mysql:tag (tag不加默认最新版本) # 2.运行mysql服务 docker run --name mysql -e MYSQL_ROOT_PASSWORDroot -d mysql:tag --没有暴露外部端口外部不能连接 docker run --name mysql -e MYSQL_ROOT_PAS…