div垂直居中可以使用height和line-height，多个div的话就不适用了.

可以使用下面的方式垂直居中

<div class="parent">

    <div class="child">内容</div>

</div>

.parent {

display: table;

}

.child {

display: table-cell;

vertical-align: middle;

}

img的垂直居中在img外的div设置 margin: 0 auto就可以了

div和img垂直居中的方法的更多相关文章

  1. div水平居中与垂直居中的方法【摘自美浩工作室官方博客 】

    大家往往在写页面中会遇到不固定宽和高的div如果水平和垂直都居中呢?在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示.如果div有固定宽度 ...

  2. div盒子水平垂直居中的方法推荐

    父盒子是position:relative 方法一:(宽高确定) div绝对定位水平垂直居中[margin 负间距], 方法二: (宽高确定) div绝对定位水平垂直居中[margin:auto实现绝 ...

  3. css固定宽高DIV内部元素垂直居中的方法

    应用案例 案例是这样的,一个外层div,高宽是固定的,但是里面内容不是固定的.很多朋友的做法是头部加一个padding或者margin,这样,里面内容显得貌似是居中了,但是假如内容变化,这样头部的固定 ...

  4. div盒子水平垂直居中的方法

    这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用.内容块定义t ...

  5. div自适应水平垂直居中的方法

    1.Flexbox布局: display:flex; justify-content:center; align-items:center; width:100%; 2.Bootstrap栅格布局 一 ...

  6. DIV文字水平垂直居中的方法

    水平居中 text-align:center 垂直居中(vertical-align) vertical-align:middle; vertical-align时而没效果 然而真实使用的时候,我们会 ...

  7. DIV里面的图片水平与垂直居中的方法

    <div class=“box”> <img /> </div> 1.水平居中: 1)box设置  text-align:center ;    text-alig ...

  8. div盒子水平垂直居中方法

    文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...

  9. DIV或者DIV里面的图片水平与垂直居中的方法

    <div class=“box”> <img /> </div> 水平居中的常用方式: text-align:center ——这可以实现子元素字体,图片的水平居中 ...

随机推荐

  1. 手把手教你看MySQL官方文档

    前言: 在学习和使用MySQL的过程中,难免会遇到各种问题.不知道当你遇到相关问题时会怎么做,我在工作或写文章的过程中,遇到不懂或需要求证的问题时通常会去查阅官方文档.慢慢的,阅读文档也有了一些经验, ...

  2. centos 7.6 安装最新版docker 19.03

    systemctl stop docker rpm -qa | grep docker 看到那个删除那个yum erase docker \ docker-client \ docker-client ...

  3. getInstance()得理解

    使用getInstance()方法的原因及作用 https://www.cnblogs.com/roadone/p/7977544.html 使用getInstance()方法的原因及作用 https ...

  4. [刷题] 70 Climbing Stairs

    要求 楼梯共有n个台阶,每次上一个台阶或两个台阶,一共有多少种上楼梯的方法? 示例 输入:n=3 [1,1,1],[1,2,],[2,1] 输出:n=3 实现 自顶向下(递归) 递归 1 class ...

  5. ft2000安装tigervnc

    apt update apt install tigervnc*vncserver :88 history >>history

  6. 029. Python多态介绍

    多态:不同的子类对象,调用相同的父类方法,产生不同的结果 继承 重写 在不改变原有代码的前提下,实现了不同的效果 class Soldier(): # 攻击 def attack(self): pas ...

  7. linux基础之权限管理

    本节内容 1. 权限类别 属主(owner) 属组(group) 其他人(other) 2. 查看权限 ls -l 十位: 第一位文件类型-,d,l, 3. 设置权限 chmod 选项 权限模式 fi ...

  8. 如何设置 web 项目打开的默认页面

    引言 我们在创建 Web 项目启动 Tomcat 会自动打开一个默认 index.jsp 页面,这个页面是创建 Web 项目时就自动生成的.那么,如何设置 web 项目打开的这个的默认页面,改为自己的 ...

  9. pyqt安装

    一.安装PyQt5 pip install PyQt5 二.安装PyQt-tools pip install PyQt-tools *注:mac不需要安装PyQt-tools,能够正常使用,只支持Wi ...

  10. 【补档STM32】STM32F103俄罗斯方块游戏实现

    项目地址:https://gitee.com/daycen/stm32-tetris/tree/master 使用Keil uVision5打开即可 一.概述 ​ 本文介绍了一个基于STM32的俄罗斯 ...