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

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

<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. PAT1118. Birds in Forest (并查集)

    思路:并查集一套带走. AC代码 #include <stdio.h> #include <string.h> #include <algorithm> using ...

  2. UVA - 1631 Locker 记忆化搜索

    题意:给定两个密码串,每次可以让1~3个相邻的密码向上或者向下滚动,每个密码是 ,问最少需要多少次滚动可以让原串成为目标串? 思路:假设当前要让第i位密码还原,我们可以同时转动,不同的转动方式会影响后 ...

  3. python如何使用pymysql模块

    Python 3.x 操作MySQL的pymysql模块详解 前言pymysql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同.但目前pymysql支持python3.x而M ...

  4. Docker系统四:Dcoker的镜像管理

    1. Dcoker镜像初识 $ docker images -a //查看当前所有镜像 REPOSITORY TAG IMAGE ID CREATED SIZE cptactionhank/atlas ...

  5. R语言︱XGBoost极端梯度上升以及forecastxgb(预测)+xgboost(回归)双案例解读

    XGBoost不仅仅可以用来做分类还可以做时间序列方面的预测,而且已经有人做的很好,可以见最后的案例. 应用一:XGBoost用来做预测 ------------------------------- ...

  6. RS232 3线制与7线制的区别

    当通信距离较近时,可不需要Modem,通信双方可以直接连接,这种情况下,只需使用少数几根信号线.最简单的情况,在通信中根本不需要RS-232C的控制联络信号,只需三根线(发送线.接收线.信号地线)便可 ...

  7. linux驱动---用I/O命令访问PCI总线设备配置空间

    PCI总线推出以来,以其独有的特性受到众多厂商的青睐,已经成为计算机扩展总线的主流.目前,国内的许多技术人员已经具备开发PCI总线接口设备的能 力.但是PCI总线的编程技术,也就是对PCI总线设备的操 ...

  8. MongoDB集群之分片

    原文:点击打开链接 MongoDB分片 分片(sharding)是将数据拆分,将其分散在不同的机器上的过程.MongoDB支持自动分片 片键(shard key)设置分片时,需要从集合里面选一个键,用 ...

  9. AM3358--Uboot支持LCD输出1024*768

    1. uboot/include/lcd/tq3358_fb.h #define TFT240320 1 #define TFT320240 2 #define TFT480272 3//T43(天嵌 ...

  10. AM335x(TQ335x)学习笔记——USB驱动移植

    对于AM335x来讲,TI维护的USB驱动已经非常完善了,本文称之为移植,实际上仅仅是配置内核选项使能USB HOST/OTG功能.废话少说,直接动手开启AM335x的USB驱动配置项. Step1. ...