css实现居中对齐的几种方式
一般来说居中的话可分为水平居中与垂直居中，以下是我个人总结的几种方式
1.水平居中：
- inline元素：text-algin:center实现
- block元素：margin：auto
- absolute元素：left:50%+margin-left:负该盒子宽度的一半（必须得知道该元素的宽度）
2.垂直居中
- inline元素：line-height=height实现
- absolute元素：left:50%+margin-top:负该盒子高度的一半（必须得知道该元素的高度）
- absolute元素：transform(-50%,-50%）
- absolute元素：left，right，top。bottom都等于0加上margin：auto
具体实现代码如下：
<body>
<div class="container container-1">
<span>一段文字</span>
</div> <div class="container container-2">
<div class="item">
this is item
</div>
</div> <div class="container container-3">
<div class="item">
this is item
</div>
</div> <div class="container container-4">
<div class="item">
this is item
</div>
</div>
</body>
<style type="text/css">
.container {
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
height: 200px;
} .item {
background-color: #ccc;
} .container-1 {
text-align: center;
line-height: 200px;
height: 200px;
} .container-2 {
position: relative;
} .container-2 .item {
width: 300px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -50px;
} .container-3 {
position: relative;
} .container-3 .item {
width: 200px;
height: 80px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
} .container-4 {
position: relative;
} .container-4 .item {
width: 100px;
height: 50px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
</style>
css实现居中对齐的几种方式的更多相关文章
- CSS实现水平垂直居中的1010种方式
转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...
- CSS 图像居中对齐
CSS 图像居中对齐 我们在<CSS 内外边距>学过内容居中,它的原理是将外边左右设置为auto.图像居中也是这个原理. 示例 <!DOCTYPE html> <htm ...
- 【css】清除浮动的几种方式
[css]清除浮动的几种方式 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...
- 【原】css实现两端对齐的3种方法
说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...
- css实现两端对齐的3种方法
两端对齐在移动端非常见,说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐 ...
- 利用CSS实现居中对齐
1. 文本居中 首先编写一个简单的html代码,设置一个类名为parentDiv的div对象.html代码如下: <div class="parentDiv"> 这里随 ...
- CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...
- css文件引人的三种方式
前言 1995年,W3C发布了CSS草案 1996年,W3C正式推出CSS1 1998年,推出CSS2 2001年从CSS3开始,CSS这门语言分割成多个独立的模块,每个模块独立分级,且只包含一小部分 ...
- 简单说 通过CSS实现 文字渐变色 的两种方式
说明 这次的重点就在于两个属性, background 属性 mask 属性 这两个属性分别是两种实现方式的关键. 解释 方式一 效果图 代码 <!DOCTYPE html> <ht ...
- CSS上下左右居中对齐
上下左右居中对齐 display: inline/inline-block 将父元素(容器)设定 text-align: center: 即可左右置中. display: block 将元素本身的 ...
随机推荐
- 通过fetch_mcp，让Cline能够获取网页内容。
fetch_mcp介绍 GitHub地址:https://github.com/zcaceres/fetch-mcp 此MCP服务器提供了以多种格式(包括HTML.JSON.纯文本和Markdown) ...
- rust学习笔记(4)
流程控制 if if n < 0 { print!("{} is negative", n); } else if n > 0 { print!("{} is ...
- ollama系列1：轻松3步本地部署deepseek，普通电脑可用
本文主要介绍如何通过ollama快速部署deepseek.qwq.llama3.gemma3等大模型,网速好的小伙伴10分钟就能搞定.让你摆脱GPU焦虑,在普通电脑上面玩转大模型. 安装指南(无废话版 ...
- nacos(九)：sentinel——规则持久化
接上回,sentinel基本使用我们已经掌握.但是在设置限流规则时,会发现规则都是临时的,一段时间没访问资源或者重启sentinel,规则就会消失.所以,我们需要有一个将规则持久化保存的地方,让规则一 ...
- ANSYS 导出节点的位移数据
1. 数据保存 确定待提取的节点编号: 获取节点位移变量: 将节点位移变量存储到数组中,用于数据传递: ! 输出对应节点的位移到csv文件 ! 注意同时导入.db和.rst,并切换到/post26模块 ...
- Supergateway：MCP服务器的远程调试与集成工具
Supergateway 是一款专为 MCP(Model Context Protocol)服务器设计的远程调试与集成工具,通过 SSE(Server-Sent Events)或 WebSocket( ...
- Oracle 11G R2 安装图解
个人学习需要,在Windows Server 2008 R2 上安装 Oracle 11G R2 Tips:需要下载2个文件,file1和file2 解压后需要合并到同一个文件夹下才能正常安装(这里就 ...
- Docker Swarm Mode 的容器资源回收问题
问题描述 Docker Swarm Mode 中 service 的update/scale等操作都会形成残留的容器和镜像,会造成一定程度的磁盘空间占用及缓存占用等问题... 解析 存在即合理,残留的 ...
- Ubuntu22.04办公环境初始设置记录
1. 前言 这周末刚从Windows办公环境切换到 Ubuntu 22.04,有些东西还是比较折腾,记录一下便于以后查找. 2. 安装时的分区设置 从一块完整的新硬盘安装Ubuntu单系统时,只需要以 ...
- 学习unigui【27】像pg的jsonb一样编辑json。
var I: Integer; CurrentObject: TJSONObject; FieldName: string; Pair: TJSONPair;function CreateJS ...