使用inline-block做水平垂直居中

父级宽高不定，如何使子元素水平垂直居中？

下面是用 display: inline-block 实现的：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>垂直自适应</title>

    <style>

    * {

        margin: 0; padding: 0;

    }

    .box {

        position: relative;

        width: 400px; height: 600px;

        margin: 100px auto;

        border: 1px solid #666;

        text-align: center;

    }

    .content {

        width: 100px; height: 100px;

        display: inline-block;

        vertical-align: middle;

        background: red;

    }

    .middle-span {

        height: 100%;

        display: inline-block;

        vertical-align: middle;

    }

    </style>

</head>

<body>

    <div class="box">

        <div class="content"></div>

        <span class="middle-span"></span>

    </div>

</body>

</html>

子级 display: inline-block; ，父级 text-align: center; ，实现水平居中。

子级 vertical-align: middle; ，且span height: 100%; ，实现垂直居中。

 

你可能感兴趣的:(inline-block)

  • 如何设置角标或者标签 z遥不可及 前端htmljavascript
    .tagRight{display:inline-block;height:20px;width:200px;background:#f00;text-align:center;margin-top:40px;margin-left:-45px;text-decoration:none;color:#fff;-webkit-transform:rotate(-45deg);-moz-transfo
  • html ul点击删除,用原生实现点击删除点击的li weixin_39993454 htmlul点击删除
    简单的实现方式#button{display:inline-block;}ul{list-style:none;}li{background-color:red;display:inline-block;width:20px;padding:10px;margin-left:3px;color:white;}window.onload=function(){varoBtn1=document.ge
  • 用JavaScript写一个简单的9*9乘法表 迷雾yx javascript开发语言ecmascript
    Documentspan{width:80px;padding:5px10px;display:inline-block;/*可以使行内元素表现得像块级元素一样*/text-align:center;/*文本居中*/border:1pxsolidturquoise;margin:2px;/*每个边框之间距离为2px*/border-radius:10px;/*边框圆润*/box-shadow:6p
  • 快速回顾-HTML5 code_stream #HTMLhtml5
    HTML5-常用的标签：https://blog.csdn.net/TKOP_/article/details/111395865标签定义关于HTML文档的元数据。元数据是关于数据的数据（信息）。-->快速复习HTML5.inline-block{display:inline-block;}.font-red{color:red;}#abc{color:blue;}标题1标题2标题6这是一个段文本
  • Ajax实现一个简单的文件上传进度条 niceLiuSir ajaxokhttp前端
    Ajax实现一个简单的文件上传进度条功能。1.HTML代码文件名：2.CSS样式.progress-div{width:100%;height:20px;background-color:#ffffff;}#progress{height:20px;background-color:#1d9e7d;display:inline-block;}3.JS代码functionsave(){$('#sub
  • CSS学习4[重点] 乌鸦不像写字台 css学习css学习前端
    标签显示模式一、块级元素（block-level）二、行内元素（inline-level）三、行内块标签（inline-block）四、显示模式转换一、块级元素（block-level）每一个块元素通常会独自占据一行或多行，可以对其设置高度、宽度、对齐等属性。常用的块级元素：div，p，h1，ul，ol特点：从新行开始有宽度、行高宽度默认页面100%可以容纳内联元素和其他元素。二、行内元素（inl
  • ant design 表单label固定宽度 花开富贵城 css前端html
    labelCol:{style:'width:80px;display:inline-block;vertical-align:inherit;'},wrapperCol:{style:'width:calc(100%-80px);display:inline-block;'},
  • css精灵图 码农NoError cssjavascript前端
    Document.star{display:inline-block;width:55px;height:11px;background-color:aqua;background-image:url(./img/ic_rating_s.png);}.star4{background-position:0-22px;}.star2{background-position:0-66px;}.star
  • 前端，高度塌陷 沦陷_99999
    本来父元素是由子元素抻开的，子元素设置了浮动之后，子元素就脱离文档流了，父元素无法抻开，就会形成高度塌陷解决高度塌陷BFC父元素的垂直外边距不会和子元素重叠开启BFC的元素不会被浮动元素所覆盖开启BFC的元素可以包含浮动的子元素如何开启BFC设置元素浮动设置元素的绝对定位设置元素为inline-block将元素的overflow设置为一个非visible的值（副作用最小的）.box{border:
  • CSS属性 - display coolchaobing 前端学习小记css前端css3
    CSS中有个display属性，能修改元素的显示类型，有4个常用值block：让元素显示为块级元素；inline：让元素显示为行内级元素；inline-block：让元素同时具备行内级、块级元素的特征；none：隐藏元素；特性block元素独占父元素的一行；可以随意设置宽高；高度默认由内容决定；inline-block元素跟其他行内级元素在同一行显示；可以随意设置宽高；可以这样理解；✓对外来说，它
  • 浮动和定位 湾里晴空
    关于浮动使用场景:需要将大的布局排列成一行，一般使用浮动；对于小的布局排列一般使用inline-block即可；浮动使用后一般需要清除浮动：clear：left/right/both其中第一个的意思是该元素位置在左侧浮动元素的下方，其top在左侧浮动元素bottom元素的下方。浮动可以通过设置margin来达到偏移的效果。如果需要在一列中实现水平平均布局，可以使用flex布局方式浮动除了直接使用c
  • 2019-03-28作业 您的名称已被使用
    html：zuoye1css：.he{width:45px;height:33px;overflow:hidden;position:relative;margin:50pxauto;}.heimg{/*display:inline-block;*/position:absolute;top:-335px;left:-10px;}.heimg:hover{left:-59px;}.heimg:ac
  • css通过calc动态计算宽度 徐同保 css前端javascript
    max-width:calc(100%-40px).m-mj-status-drawing-info-data{display:inline-block;margin:10px;min-width:200px;padding:10px;border-radius:10px;background:#ddd;max-width:calc(100%-40px);word-wrap:break-word;
  • css 动画效果：水平直线来回运动：animation CAD GIS开发 css前端
    background:url(https://hao2.qhimg.com/t01b958e8662853d1c8.png)no-repeat;background-size:119px30px;color:#fff;display:inline-block;height:30px;width:119px;line-height:27px;position:absolute;left:-115px
  • CSS-布局-MDN文档学习笔记 LoveEmiliaForever MDN前端入门文档学习笔记前端css
    CSS布局查看更多学习笔记：GitHub：LoveEmiliaForeverMDN中文官网介绍CSS布局正常布局流简介正常布局流是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式当你使用css创建一个布局时，你正在离开正常布局流下列布局技术会覆盖默认的布局行为display属性，如block、inline、inline-block、grid、flex浮动，应用float值positio
  • icon旋转 让你的 icon转起来 Daniel·M css3csshtml
    .icon-loading1{animation:move1.2slinearinfinite;-webkit-animation:move1.2slinearinfinite;display:inline-block;}@keyframesmove{100%{transform:rotate(360deg);}}让你的icon转起来icon-loading1:这个是你的icon的class类名c
  • re:从0开始的CSS之旅 14. 显示模式的切换 扶摇| 从0开始的CSS之旅css前端javascript
    1.两个属性display属性可以用于转换元素的显示模式可选值：block转换为块元素inline转换为行内元素inline-block转换为行内块元素none不显示元素，并且不占用元素的位置visibility属性用于设置元素是否显示可选值：visible显示元素（默认值）hidden隐藏元素，但是占用元素的位置示例如下：displaymodelchangingdiv{width:200px;h
  • css伪类-小圆点 杨淑璟
    项目需求：在每个单元格的前面加一个小圆点，效果图如下：效果图.jpg搜了一大堆文章，加小圆点的方法无非就是设置width、height、border-raduis。可是来来回回试了好多遍，就是样式加不上，汗颜~偶然间看一大神说必须加上display:inline-block;才会生效，我的天呐，不会是真的吧。对，就是这个样子滴，附上完整的代码，可随意ctrlc+v美句子哈哈山有木兮木有枝，心悦君兮
  • CSS综合案例导航和五彩导航 浮光跃金.free csshtml前端
    导航/*a显示模式是行内,加宽高默认不生效,转显示模式:行内块*/a{text-decoration:none;width:200px;height:100px;background-color:aqua;display:inline-block;color:#fff;text-align:center;line-height:100px;}a:hover{background-color:ora
  • css魔法 真名,CSS魔法（二） weixin_39641231 css魔法真名
    #文档类型#字符集#换行标签#divspan标签后代选择器子代选择器>交集选择器div.one{}并集选择器行内元素和块级元素的区别块级元素：独占一行能设置大小行内元素：不能设置大小display：inline-block可将行内元素转为块级元素行高line-height文字居中div{height:50px;width:200px;background-color:pink;line-heigh
  • 自适应图片九宫格 css,CSS实现自适应九宫格布局 大全 我来看看就好1123 自适应图片九宫格css
    看到微博和朋友圈都实现了图片九宫格，曾经有次面试也问到了九宫格这个问题，当时想到的是先固定每个单元格的宽高，然后进行浮动。今天想折腾一下，实现自适应父元素宽度的布局。这次我只写了四种方式去实现九宫格，算上inline-block的话就是五种了。首先要注意的是九宫格容器是宽高相等的正方形，并且是自适应的，这里关键是实现宽高相等，有些人想到了相对视口宽度vw，但是它是相对于屏幕可见宽度来设置的，并且会
  • 前端常见面试题集合 洪洪呀 web前端vue
    web前端面试题大厂小厂均适用盒模型盒模型的组成,有里向外content,padding,border,margin清除浮动的方式使用position:absolute/fixed使用display:inline-block/table使用float元素使用overflow!==visiblecss常用布局方式常见的有div布局css布局flex布局table布局流式布局响应式布局html5的新特
  • Websocket前端接收测试工具 灰灰的辉 websocket
    本地websocket测试.btn-group{display:inline-block;}连接断开清空发送functionformatDate(now){varyear=now.getFullYear();varmonth=now.getMonth()+1;vardate=now.getDate();varhour=now.getHours();varminute=now.getMinutes(
  • 蓝桥杯Web应用开发-display属性 AAA_建筑材料批发叶总 蓝桥杯Web应用开发(大学组)前端css蓝桥杯html5
    display属性专栏持续更新中display属性可以用来设置元素在页面上的排列方式，也可用来隐藏元素。display属性值的说明如下表所示。属性值说明block元素以块级方式展示。inline元素以内联方式展示。inline-block元素以内联块的方式展示。none隐藏元素。block属性值block属性值可以让行内元素以块级元素的方式显示在页面上。其使用格式如下：display:block;
  • css 居中布局的几种常用方式 cesiuming
    水平居中1、第一种方案：父元素设置：text-align:center;子元素设置：display:inline-block;优点：浏览器兼容性比较好缺点：text-align属性具有继承性，导致子级元素的文本也是居中显示的,解决方案在子级元素中增加text-align:lfet;子级元素.parent{width:100%;height:300px;background:#ccc;/**cent
  • 超宽横向滚动 初晨未凉 笔记css3
    Document#inner_box{white-space:nowrap;overflow-x:scroll;/*overflow-y:hidden;*/}.item{width:350px;height:200px;font-size:30px;display:inline-block;}.item:nth-child(odd){background:skyblue;}.item:nth-ch
  • PC公共样式 慕中川梨花 不起眼的csscss
    body{background:#ebebeb;}/*常用公共样式*/.bd{border:1pxsolid;}.h100pc{height:100%;}.w100pc{width:100%;}.ovh{overflow:hidden;}.ova{overflow:auto;}.inb{display:inline-block;}.dsn{display:none;}.fixed{position
  • BFC与浏览器兼容 我不信这样也重名
    BFC一、BFC是什么BFC(Blockformattingcontext)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-levelbox参与，它规定了内部的Block-levelBox如何布局，并且与这个区域外部毫不相干。二、如何形成BFCfloat属性不设为noneposition属性设为absolute或fixeddisplay设为inline-block、table-
  • 【CSS】外边距折叠（margin 塌陷） 小秀_heo CSScss前端
    外边距折叠(collapsingmargins)毗邻的两个或多个margin会合并成一个margin，叫做外边距折叠。规则如下:两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠浮动元素/inline-block元素/绝对定位元素/行内元素的margin不会和垂直方向上的其他元素的margin折叠创建了块级格式化上下文(BFC)的元素，不会和它的子元素发生margin折叠我们可以利用外
  • 前端之CSS 布局 出来混要还的
    1.显示方式：display设置元素的显示方式display:block|inline|inline-block|none1.1.block块级元素默认宽度为父元素宽度可设置宽高换行显示默认元素：div、p、h1~h6、ul、form..1.2.inline行级元素默认宽度为内容宽度不可设置宽高同行显示默认元素：span、a、label、cite、em....1.3.inline-block默认宽
  • 插入表主键冲突做更新 a-john
    有以下场景： 用户下了一个订单，订单内的内容较多，且来自多表，首次下单的时候，内容可能会不全（部分内容不是必须，出现有些表根本就没有没有该订单的值）。在以后更改订单时，有些内容会更改，有些内容会新增。 问题： 如果在sql语句中执行update操作，在没有数据的表中会出错。如果在逻辑代码中先做查询，查询结果有做更新，没有做插入，这样会将代码复杂化。 解决： mysql中提供了一个sql语
  • Android xml资源文件中@、@android:type、@*、？、@+含义和区别 Cb123456 @+@?@*
    一.@代表引用资源 1.引用自定义资源。格式：@[package:]type/name android：text="@string/hello"   2.引用系统资源。格式：@android:type/name     android:textColor="@android:color/opaque_red"
  • 数据结构的基本介绍 天子之骄 数据结构散列表树、图线性结构价格标签
    数据结构的基本介绍 数据结构就是数据的组织形式，用一种提前设计好的框架去存取数据，以便更方便，高效的对数据进行增删查改。正确选择合适的数据结构，对软件程序的高效执行的影响作用不亚于算法的设计。此外，在计算机系统中数据结构的作用也是非同小可。例如常常在编程语言中听到的栈，堆等，就是经典的数据结构。   经典的数据结构大致如下：   一：线性数据结构 (1)：列表 a
  • 通过二维码开放平台的API快速生成二维码 一炮送你回车库 api
     现在很多网站都有通过扫二维码用手机连接的功能，联图网(http://www.liantu.com/pingtai/)的二维码开放平台开放了一个生成二维码图片的Api,挺方便使用的。闲着无聊，写了个前台快速生成二维码的方法。        html代码如下:(二维码将生成在这div下) ? 1  &nbs
  • ImageIO读取一张图片改变大小 3213213333332132 javaIOimageBufferedImage
    package com.demo; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.imageio.ImageIO; /** * @Description 读取一张图片改变大小 * @author FuJianyon
  • myeclipse集成svn（一针见血） 7454103 eclipseSVNMyEclipse
                                     &n
  • 装箱与拆箱----autoboxing和unboxing darkranger J2SE
    4.2　自动装箱和拆箱 基本数据(Primitive)类型的自动装箱(autoboxing)、拆箱(unboxing)是自J2SE 5.0开始提供的功能。虽然为您打包基本数据类型提供了方便，但提供方便的同时表示隐藏了细节，建议在能够区分基本数据类型与对象的差别时再使用。 4.2.1　autoboxing和unboxing 在Java中，所有要处理的东西几乎都是对象(Object)
  • ajax传统的方式制作ajax aijuans Ajax
    //这是前台的代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+
  • 只用jre的eclipse是怎么编译java源文件的？ avords javaeclipsejdktomcat
    eclipse只需要jre就可以运行开发java程序了，也能自动 编译java源代码，但是jre不是java的运行环境么，难道jre中也带有编译工具？ 还是eclipse自己实现的？谁能给解释一下呢问题补充：假设系统中没有安装jdk or jre，只在eclipse的目录中有一个jre，那么eclipse会采用该jre，问题是eclipse照样可以编译java源文件，为什么呢？ &nb
  • 前端模块化 bee1314 模块化
    背景： 前端JavaScript模块化，其实已经不是什么新鲜事了。但是很多的项目还没有真正的使用起来，还处于刀耕火种的野蛮生长阶段。   JavaScript一直缺乏有效的包管理机制，造成了大量的全局变量，大量的方法冲突。我们多么渴望有天能像Java（import），Python (import)，Ruby(require)那样写代码。在没有包管理机制的年代，我们是怎么避免所
  • 处理百万级以上的数据处理 bijian1013 oraclesql数据库大数据查询
    一.处理百万级以上的数据提高查询速度的方法：        1.应尽量避免在 where 子句中使用!=或<>操作符，否则将引擎放弃使用索引而进行全表扫描。         2.对查询进行优化，应尽量避免全表扫描，首先应考虑在 where 及 o
  • mac 卸载 java 1.7 或更高版本 征客丶 javaOS
    卸载 java 1.7 或更高 sudo rm -rf /Library/Internet\ Plug-Ins/JavaAppletPlugin.plugin 成功执行此命令后，还可以执行 java 与 javac 命令 sudo rm -rf /Library/PreferencePanes/JavaControlPanel.prefPane 成功执行此命令后，还可以执行 java
  • 【Spark六十一】Spark Streaming结合Flume、Kafka进行日志分析 bit1129 Stream
    第一步，Flume和Kakfa对接，Flume抓取日志，写到Kafka中 第二部，Spark Streaming读取Kafka中的数据，进行实时分析   本文首先使用Kakfa自带的消息处理（脚本）来获取消息，走通Flume和Kafka的对接 1. Flume配置 1. 下载Flume和Kafka集成的插件，下载地址：https://github.com/beyondj2ee/f
  • Erlang vs TNSDL bookjovi erlang
          TNSDL是Nokia内部用于开发电信交换软件的私有语言，是在SDL语言的基础上加以修改而成，TNSDL需翻译成C语言得以编译执行，TNSDL语言中实现了异步并行的特点，当然要完整实现异步并行还需要运行时动态库的支持，异步并行类似于Erlang的process（轻量级进程），TNSDL中则称之为hand，Erlang是基于vm(beam)开发，
  • 非常希望有一个预防疲劳的java软件, 预防过劳死和眼睛疲劳,大家一起努力搞一个 ljy325 企业应用
    　非常希望有一个预防疲劳的java软件，我看新闻和网站，国防科技大学的科学家累死了，太疲劳，老是加班，不休息，经常吃药，吃药根本就没用，根本原因是疲劳过度。我以前做java,那会公司垃圾，老想赶快学习到东西跳槽离开，搞得超负荷，不明理。深圳做软件开发经常累死人，总有不明理的人，有个软件提醒限制很好，可以挽救很多人的生命。 相关新闻： （1）IT行业成五大疾病重灾区：过劳死平均37.9岁
  • 读《研磨设计模式》-代码笔记-原型模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /** * Effective Java 建议使用copy constructor or copy factory来代替clone()方法： * 1.public Product copy(Product p){} * 2.publi
  • 配置管理---svn工具之权限配置 chenyu19891124 SVN
    今天花了大半天的功夫，终于弄懂svn权限配置。下面是今天收获的战绩。 安装完svn后就是在svn中建立版本库，比如我本地的是版本库路径是C:\Repositories\pepos。pepos是我的版本库。在pepos的目录结构 pepos    component    webapps 在conf里面的auth里赋予的权限配置为 [groups]
  • 浅谈程序员的数学修养 comsci 设计模式编程算法面试招聘
                                     浅谈程序员的数学修养
  • 批量执行 bulk collect与forall用法 daizj oraclesqlbulk collectforall
    BULK COLLECT 子句会批量检索结果，即一次性将结果集绑定到一个集合变量中，并从SQL引擎发送到PL/SQL引擎。通常可以在SELECT INTO、 FETCH INTO以及RETURNING INTO子句中使用BULK COLLECT。本文将逐一描述BULK COLLECT在这几种情形下的用法。     有关FORALL语句的用法请参考：批量SQL之 F
  • Linux下使用rsync最快速删除海量文件的方法 dongwei_6688 OS
    1、先安装rsync：yum install rsync 2、建立一个空的文件夹：mkdir /tmp/test 3、用rsync删除目标目录：rsync --delete-before -a -H -v --progress --stats /tmp/test/ log/这样我们要删除的log目录就会被清空了，删除的速度会非常快。rsync实际上用的是替换原理，处理数十万个文件也是秒删。
  • Yii CModel中rules验证规格 dcj3sjt126com rulesyiivalidate
    Yii cValidator主要用法分析：  yii验证rulesit 分类： Yii yii的rules验证 cValidator主要属性 attributes ,builtInValidators,enableClientValidation,message,on,safe,skipOnError  
  • 基于vagrant的redis主从实验 dcj3sjt126com vagrant
    平台: Mac 工具: Vagrant 系统: Centos6.5 实验目的: Redis主从   实现思路 制作一个基于sentos6.5, 已经安装好reids的box, 添加一个脚本配置从机, 然后作为后面主机从机的基础box   制作sentos6.5+redis的box   mkdir vagrant_redis cd vagrant_
  • Memcached(二)、Centos安装Memcached服务器 frank1234 centosmemcached
    一、安装gcc rpm和yum安装memcached服务器连接没有找到，所以我使用的是make的方式安装，由于make依赖于gcc，所以要先安装gcc 开始安装，命令如下，[color=red][b]顺序一定不能出错[/b][/color]： 建议可以先切换到root用户，不然可能会遇到权限问题：su root 输入密码...... rpm -ivh kernel-head
  • Remove Duplicates from Sorted List hcx2013 remove
    Given a sorted linked list, delete all duplicates such that each element appear only once. For example,Given 1->1->2, return 1->2.Given 1->1->2->3->3, return&
  • Spring4新特性——JSR310日期时间API的支持 jinnianshilongnian spring4
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • 浅谈enum与单例设计模式 247687009 java单例
    在JDK1.5之前的单例实现方式有两种(懒汉式和饿汉式并无设计上的区别故看做一种)，两者同是私有构 造器，导出静态成员变量，以便调用者访问。 第一种 package singleton; public class Singleton { //导出全局成员 public final static Singleton INSTANCE = new S
  • 使用switch条件语句需要注意的几点 openwrt cbreakswitch
    1. 当满足条件的case中没有break，程序将依次执行其后的每种条件（包括default）直到遇到break跳出 int main() { int n = 1; switch(n) { case 1: printf("--1--\n"); default: printf("defa
  • 配置Spring Mybatis JUnit测试环境的应用上下文 schnell18 springmybatisJUnit
    Spring-test模块中的应用上下文和web及spring boot的有很大差异。主要试下来差异有： 单元测试的app context不支持从外部properties文件注入属性 @Value注解不能解析带通配符的路径字符串 解决第一个问题可以配置一个PropertyPlaceholderConfigurer的bean。 第二个问题的具体实例是：    
  • Java 定时任务总结一 tuoni javaspringtimerquartztimertask
     Java定时任务总结  一.从技术上分类大概分为以下三种方式：  1.Java自带的java.util.Timer类，这个类允许你调度一个java.util.TimerTask任务;   说明：    java.util.Timer定时器，实际上是个线程，定时执行TimerTask类 &
  • 一种防止用户生成内容站点出现商业广告以及非法有害等垃圾信息的方法 yangshangchuan rank相似度计算文本相似度词袋模型余弦相似度
    本文描述了一种在ITEYE博客频道上面出现的新型的商业广告形式及其应对方法，对于其他的用户生成内容站点类型也具有同样的适用性。   最近在ITEYE博客频道上面出现了一种新型的商业广告形式，方法如下：     1、注册多个账号（一般10个以上）。     2、从多个账号中选择一个账号，发表1-2篇博文
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他