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 将元素本身的 ...
随机推荐
- [解决方案][docker] Http: server gave HTTP response to HTTPS client
前言 用centos运行docker不支持http,需要在daemon.json 里面配置一下 目录 没有daemon.json 需要添加这个文件 在daemon.json 增添配置 重启即可 一.l ...
- 在Linux系统中下载`gcc-linaro-7.2.1-2017.11-x86_64_aarch64-linux-gnu`工具链
要在Linux系统中下载gcc-linaro-7.2.1-2017.11-x86_64_aarch64-linux-gnu工具链,你可以按照以下步骤进行操作: 点击查看代码 1. **打开终端**:你 ...
- vuepress-reco搭建与部署指南
个人博客:槿苏的知识铺 一.前言 在技术飞速发展的今天,高效地编写.维护和呈现文档已成为开发者不可或缺的能力.无论是开源项目.团队协作还是个人知识沉淀,一套结构清晰.体验优雅的文档系统都能显著提升 ...
- Netty基础—5.Netty的使用简介
大纲 1.Netty服务端的启动流程 2.服务端IO事件的处理类 3.Netty客户端的启动流程 4.客户端IO事件的处理类 5.启动Netty服务端和客户端的方法说明 6.Netty服务端和客户端使 ...
- webpack3使用additionalData和prependData都不管用
10.css相关配置 utils.js sass: generateLoaders('sass', { indentedSyntax: true, implementation: require('n ...
- 国产化-内存数据库tendis-单机安装（完美替代redis）
挺好的产品腾讯能开源还是体现了大厂的担当和格局,赞一个.阿里也开源了一些不错的产品后面讲. Tendis 介绍 Tendis 是腾讯公司开源的一款高性能分布式存储系统,基于 Redis 协议开发,具有 ...
- SQL Server 查看版本信息
SQL Server 查看版本信息3种方法: 1) 使用命令行查看 [Win + R]键 -> 打开cmd 2) 使用SSMS查看 打开并连接SSMS后查看 3) 通过服务器属性查看 使用SSM ...
- restful 服务器一个问题，看ChatGPT的威力 （续）
资料很多,但是真正能经得住7X24运行的还真不容易.说穿了就是你的程序不够健壮. 玩数据处理的,也就是:数据库连接 → 查询 → 拉数据 → 生成结果 → 释放连接 → 返回数据 .可是看下面: FD ...
- 学习unigui【18】unidbgrid的GridsGroupingSorting
折腾二天,你不按照demo里的代码来,就是没有效果.功力不够导致的.学习学习再学习!努力努力再努力! procedure TUniGridsGroupingSorting.UniDBGrid1Mult ...
- System V信号量 vs. POSIX信号量：核心区别与选型指南
System V信号量 vs. POSIX信号量:核心区别与选型指南 最近在学习linux系统编程的章节,接触到了两种信号量,所以专门研究了二者的区别,将二者的对比记录于此. 在Linux多线程/进程 ...