css设置垂直居中方式总结
方式1:flex布局,display:flex;align-items:center
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
.box{width:100px;height:100px;border:1px solid #ddd;display:flex;align-items:center;}
.inner{width:40px;height:40px;background:red;}
</style>
</head>
<body>
<div class="box">
<div class="inner"></div>
</div>
</body>
</html>
效果如下:
方式2:position+margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
.box{width:100px;height:100px;border:1px solid #ddd;position:relative;}
.inner{width:40px;height:40px;background:red;position:absolute;top:50%;margin-top:-20px;}
</style>
</head>
<body>
<div class="box">
<div class="inner"></div>
</div>
</body>
</html>
效果图:与上面一样
方式3:如果不知道具体高度,通过position+transform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
.box{width:100px;height:100px;border:1px solid #ddd;position:relative;}
.inner{background:red;position:absolute;top:50%;transform:translateY(-50%);}
</style>
</head>
<body>
<div class="box">
<div class="inner">545454</div>
</div>
</body>
</html>
效果图:
方式4:display:table-cell+vertical-align:middle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
.box{width:100px;height:100px;border:1px solid #ddd;display:table-cell;vertical-align:middle;}
.inner{background:red;}
</style>
</head>
<body>
<div class="box">
<div class="inner">545454</div>
</div>
</body>
</html>
效果图:
方式5:box布局,box-orient控制子元素是水平分布还是垂直分布,box-align让子元素垂直居中,box-pack让子元素水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
.box{width:100px;height:100px;border:1px solid #ddd;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-pack:center;-webkit-box-align:center;}
.inner{background:red;height:20px;}
</style>
</head>
<body>
<div class="box">
<div class="inner">54</div>
<div class="inner">33</div>
</div>
</body>
</html>
效果图:
css设置垂直居中方式总结的更多相关文章
- CSS设置行内元素和块级元素的水平居中、垂直居中
CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...
- CSS实现水平垂直居中方式
1.定位 核心代码实现请看示例代码中的注释: <!DOCTYPE html> <html lang="zh"> <head> <meta ...
- css设置元素垂直居中的几个方法
最近有人问我怎么设置元素垂直居中?我....(这么基础的东西都不会?我有点说不出话来), 不过还是耐心的教了他几个方法,好吧教完他们,顺便把这些方法整理一下 第一种:通过设置成为表格元素的方式来实现 ...
- css设置水平垂直居中
关于CSS设置水平以及垂直居中的解决方案 想要水平居中? 内联的元素(文字)? .center-children { text-align: center;} 块级元素? .center-me { m ...
- CSS实现垂直居中
Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的<td>. ...
- [HTML]DIV+CSS 文字垂直居中
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- div+css文字垂直居中 解决左侧头像右侧姓名,姓名多换行后相对于头像仍居中显示
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- CSS图片垂直居中方法
让div里面的多行文本垂直居中的方法: div{height:100px;width:100px;border:solid 1px red;text-align:center; display:tab ...
- python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
随机推荐
- 【NET Core】Nuget包发布流程
1.新建一个.NET Core类库 2.新增一个方法,并编译项目 3.下载Nuget.exe,与刚才新建的类库放在同一目录下 下载地址:https://www.nuget.org/downloads ...
- js判断当前浏览器
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isOpera = userAgent.indexOf("Opera ...
- requests库/爬取zhihu表情包
先学了requests库的一些基本操作,简单的爬了一下. 用到了requests.get()方法,就是以GET方式请求网页,得到一个Response对象.不加headers的话可能会400error所 ...
- 微信小程序-列表渲染多层嵌套循环
微信小程序-列表渲染多层嵌套循环 入门教程之列表渲染多层嵌套循环,目前官方的文档里,主要是一维数组列表渲染的案例,还是比较简单单一,给刚入门的童鞋还是无从入手的感觉. <view wx:for= ...
- nodejs window平台上 以服务运行
刚学nodejs 想使用 sc create 来创建服务,但是倒腾了很久没有弄出来,创建是成功了,使用 net start 启动服务报错,没有控制功能.后来网上找了一下 发现这个东西:nssm 使用 ...
- nginx 代理 https 后,应用变成 http
需求:nginx 代理 https,后面的 tomcat 处理 http 请求,sso 的客户端,重定向时需要带上 target,而这个 target 默认是 tomcat 的 http,现在需要把这 ...
- windows—IOCP
一.重叠I/O回声服务器端 服务端: #include <stdio.h> #include <stdlib.h> #include <WinSock2.h> #d ...
- 【vue学习】vue 2.0版本以上创建项目的的步骤
一.环境准备 1.vue项目依赖 node.js npm,需要先安装node和npm,先检查本地是否安装node.npm 快捷键win+r 输入cmd 弹出操作框,如果电脑已经安装git,直接右 ...
- linux常用命令 命令管道符
多命令顺序执行 多命令顺序执行 多命令执行符 格式 作用 : 命令1:命令2 多个命令顺序执行,命令之间没有任何逻辑联系 && 命令1&&命令2 逻辑与 当命令1正确执 ...
- node-express-2-jade
1,Jade里可以省略尖括号,直接写标签名 2,标签间的嵌套关系用换行加空格来实现 3,紧接在标签名后加上.xx或#xx,就能给标签添加css类名和id,如果不写标签名默认就是div 4,标签属性写入 ...