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 将元素本身的 ...
随机推荐
- 万字调研——AI生成内容检测
数据集 TweepFake 地址 摘要:深度伪造(deepfakes).合成或篡改媒体的威胁正变得越来越令人担忧,尤其是对于那些已经被指控操纵公众舆论的社交媒体平台而言.即使是最简单的文本生成技术(例 ...
- 在Vue 3中创建和使用FormData对象
在Vue 3中创建和使用FormData对象的具体步骤如下: 创建FormData对象:在Vue组件中,首先需要创建一个新的FormData对象.FormData是一个内置的JavaScript ...
- LaTeX使用记录
安装与使用 曾在Windows10下装过MikTeX,并配合vscode插件LaTeX Workshop使用过一段时间:这次转到wsl2中,并使用texlive,所以插件的配置json需要小修改 参考 ...
- stat() "/root/xxx/index.html" failed (13: Permission denied)
前言 在 nginx 上部署静态网页报502,于是查看 nginx 错误日志 error_log /var/log/nginx/error.log;,却没有看到任何错误信息:访问 nginx活动日志 ...
- ubuntu install 下载安装包报错 subprocess installed post-installation script returned error exit status 10
前言 在 ubuntu 环境下使用 sudo apt-get install 安装软件包时,会报错 XXX 为安装软件包 dpkg:error processing package XXX (--co ...
- go string转int strconv包
前言 strconv 主要用于字符串和基本类型的数据类型的转换 s := "aa"+100 //字符串和整形数据不能放在一起 所以需要将 100 整形转为字符串类型 //+号在字符 ...
- Centos 安装 nload （流量监控）
QQ交流群:646559931.系统安装基本工具[root@localhost ~]# yum install -y gcc gcc-c++ make flex byacc libpcap ncurs ...
- 渗透技巧——CDN绕过
渗透技巧--CDN绕过 一.前言: 在渗透站点的时候常常会遇见站点有CDN加速情况,就无法准确的找到目标IP.首先是检测如何发现有无CDN,然后才能说绕过的问题. 二.检测有无CDN: 首先有以下几种 ...
- 【Java】Math类的基本操作
Math类 Math 类是数学操作类,提供了一系列的数学操作方法,包括求绝对值.三角函数等,在 Math 类中提供的一切方法都是静态方法(类方法),所以直接由类名称调用即可. Math类的基本操作: ...
- CoreOS 发行版本介绍
大多数的软件通常都有什么内测版.公测版什么的. CoreOS 发行版本 而在 CoreOS 中, 有以下3个版本: alpha - α版,音译:阿尔法,俗称尝鲜版,是最新的版本,但是容易出现bug,最 ...