• 写页面时难免会遇到水平垂直居中的问题,总结一下最近使用的方法。

一、使用垂直居中和水平居中

<div id="div1">
<img src="img/bg1.png" alt="">
</div>

对应的CSS的样式为:

		#div1 {
width: 500px;
height: 200px;
background-color: #0c0c0c;
display: table-cell;
vertical-align: middle;
text-align: center;
}

二、使用相对定位和绝对定位

主要原理是父div相对定位,子div采用绝对定位

	<div id="div4">
<img src="img/bg1.png" alt="">
</div>

对应的CSS的样式为

#div4 {
width: 500px;
height: 300px;
position: relative;
background-color: #eee;
}
#div4 img {
position: absolute;
left: 38%;
top: 35%;
}

主要是要注意的问题是要自己定位距离左、上的距离;

三、使用浮动定位

主要原理为设置父divdisplay: flex;,然后子div自由浮动

<div id="div5">
<img src="img/bg1.png" alt="">
</div>

对应的样式:

#div5 {
width: 400px;
height: 300px;
display: flex;
background-color: #0c0c0c;
}
#div5 img {
width: 116px;
height: 101px;
max-width: 100%;
max-height: 100%;
margin: auto;
}

CSS中图片水平垂直居中方法小结的更多相关文章

  1. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  2. CSS制作图片水平垂直居中

    所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...

  3. css实现图片水平垂直居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. CSS制作图片水平垂直居中 亲测推荐

    空白标签实现图片的垂直居中 这种方法很有意思,也很有独特之处,我的思路也是来自于张鑫旭-鑫空间-鑫生活写的<大小不固定的图片.多行文字的水平垂直居中>一文中的使用空白图片实现垂直对齐.他主 ...

  5. 关于div中图片水平垂直居中的问题

    最近在做一个项目,里面涉及到不固定尺寸要在div里面水平垂直居中显示 我没有用table布局,而是用了div+css,找了很久,终于在网上找到解决方案,特此记录备用 关键核心代码如下: <div ...

  6. css 使图片水平垂直居中

    1.利用display:table-cell,具体代码如下: html代码如下: <div class="img_wrap"> <img src="wg ...

  7. 纯CSS实现图片水平垂直居中于DIV(图片未知宽高)

    <div class="demo"><a href="#"><img src="http://nec.netease.c ...

  8. CSS布局中的水平垂直居中

    CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

  9. css两种常用的不定宽高的水平垂直居中方法,记住它,不再为样式发愁

    css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...

随机推荐

  1. mybatis与spring的整合(使用sqlSession进行crud)

    上次介绍了用接口的方法极大的节省了dao层,只需通过 配置文件和接口就可以实现,这次介绍的是通过splsession来实现dao,这种方法比较灵活: 先不说,上配置文件: 1.web.xml < ...

  2. 聊聊JavaScript-闭包

    今天聊聊闭包,网上五花八门的定义和解释很多很多,是不是搞得你很懵逼:每次看闭包,都不同,本来自己懂,看完别人的之后就开始怀疑自己了.在我看来,闭包简单的说就是函数里面套函数,再往大了说就是我函数外面想 ...

  3. uboot 添加hello命令

    平台:MPC8315(POWERPC) 1.在/common/ 目录下创建自己的文件,最好前缀为cmd_. cmd_hello.c ********************************** ...

  4. Emacs编辑器配置

    以前总是用的vim编辑器,今天突然想换emacs 用下.折腾了很久终于搞定.使用的是windows测试环境 emacs下载地址http://ftp.gnu.org/gnu/emacs/windows/ ...

  5. Linux显示使用者将不能利用交谈式指令来对行程

    Linux显示使用者将不能利用交谈式指令来对行程 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ top -s top - 19:23:34 up 52 min ...

  6. python空字典列表两种生成方式对赋值带来的不同影响

    最近在实现朴素贝叶斯算法碰到一个很有趣的现象(基于Python3.6.3) 我生成一个由10个空字典构成的列表: 第一种生成方式(可能大多数人都会用这种方法,形式简单) >>a = [{} ...

  7. Visio如何调整锁定图像大小

    在Visio中,比如模板中的UML类图,是不可调整大小的,这可能给我们设计图片带来了一些不便之处,如下图: 可以看到其边框是显示锁定状态无法修改的,当我们在左下角修改器长宽时,也会出现不可修改的情况. ...

  8. Spring Boot 文件上传

    其实网上已经有很多这样的文章了.为什么我还要记录一下呢?原因是在工作中对接外系统时,碰到了他们调取我们文件上传接口确存在着http请求头部规范的情况,从而导致用传统方法获取不到参数.今天就来整理下Sp ...

  9. debug和release下PostThreadMessage的异同

    MFC中创建线程分为工作线程和UI线程.其中UI线程可以通过继承CWinThread进行创建. 创建函数如下: CWinThread *m_pRecogThread;//语音识别线程 m_pRecog ...

  10. 最新的 iOS 申请证书与发布流程

    申请流程. 1. 申请钥匙串文件 进入  (Launchpad),找到   (我的是在其他里面找到的),运行后再左上角 存储在桌面就好了,然后就完成退出钥匙串工具就可以了. 2.申请开发证书,发布证书 ...