方式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设置垂直居中方式总结的更多相关文章

  1. CSS设置行内元素和块级元素的水平居中、垂直居中

    CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...

  2. CSS实现水平垂直居中方式

    1.定位 核心代码实现请看示例代码中的注释: <!DOCTYPE html> <html lang="zh"> <head> <meta ...

  3. css设置元素垂直居中的几个方法

    最近有人问我怎么设置元素垂直居中?我....(这么基础的东西都不会?我有点说不出话来),  不过还是耐心的教了他几个方法,好吧教完他们,顺便把这些方法整理一下 第一种:通过设置成为表格元素的方式来实现 ...

  4. css设置水平垂直居中

    关于CSS设置水平以及垂直居中的解决方案 想要水平居中? 内联的元素(文字)? .center-children { text-align: center;} 块级元素? .center-me { m ...

  5. CSS实现垂直居中

    Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的<td>. ...

  6. [HTML]DIV+CSS 文字垂直居中

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  7. div+css文字垂直居中 解决左侧头像右侧姓名，姓名多换行后相对于头像仍居中显示

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  8. CSS图片垂直居中方法

    让div里面的多行文本垂直居中的方法: div{height:100px;width:100px;border:solid 1px red;text-align:center; display:tab ...

  9. python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

随机推荐

  1. leecode第二百三十五题（二叉搜索树的最近公共祖先）

    /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; * TreeNode ...

  2. 4 - BFS & Topological Algorithm

    615. Course Schedule https://www.lintcode.com/problem/course-schedule/description?_from=ladder&& ...

  3. Go语言学习之14 商品秒杀架构设计与开发

    本节主要内容 1. 秒杀抢购背景2. 秒杀抢购架构设计&模块划分3. 秒杀抢购接入层实现 1. 秒杀抢购背景 (1)架构分析 电商网站架构 秒杀抢购1.0 (2)上述网站架构问题 和已有电商逻 ...

  4. AEM上的一个图片转换工具

    目的: 不同情况下,同样一张图片,需要不一样大小/背景/尺寸显示. 例子: dam下面有一张940 x 300 的图片: http://localhost:4502/content/dam/geome ...

  5. ROM、RAM、CPU、CACHE、FLASH

    内存在电脑中起着举足轻重的作用.内存一般采用半导体存储单元,包括随机存储器(RAM),只读存储器(ROM),以及高速缓存(CACHE).只不过因为RAM是其中最重要的存储器,所以通常所说的内存即指电脑 ...

  6. 记录下自己VUE项目用Hbuider打包后启动白屏问题

    刚用VUE做项目,之前测试时vue创建的自身项目打包都是启动OK没问题.今天打包自己的时,启动一直白屏.折磨了好久,百度了一堆.终于找到了方法. 首先是在config/index.js里面 build ...

  7. Android（五）——dex文件动态调试

    代码动态调试: 代码动态调试技术,一般是通过观察程序在运行过程中的状态,如寄存器内容,函数执行结果,内存使用情况等等,分析函数功能,明确代码逻辑,查找可能存在的漏洞 工具:IDA 条件:Android ...

  8. ThinkPHP5.0源码学习之缓存Cache（一）

    一.文件 1.缓存配置文件:thinkphp\convention.php 2.缓存文件:thinkphp\library\think\Cache.php 3.驱动目录:thinkphp\librar ...

  9. css实现横向带箭头步骤流程效果

    通过纯css实现圆角的步骤流程效果,扩展性强,可以随意增加减少数量,兼容性ie6+. 具体代码: <style type="text/css"> ul{margin:0 ...

  10. canal demo搭建全记录

    一.环境介绍 canal是阿里开源的中间件,主要用于同步mysql数据库变更.具体参见:https://github.com/alibaba/canal/releases 搭建环境: vmware c ...