div 内容水平垂直居中
对于前端布局来说。总有一些图片水平垂直居中老是不好看,影响整体美观,百度一大堆各种自适应方法,终于找到了一种比较简单,适用于所有场景的方法。。
1.对于布局来说。一个div搞定、
<div id="big">
<img src="img/3.jpg" />
</div>
2.然后css
#big {
width: 800px;
height: 800px;
border: 1px solid red;
margin: 0 auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
图片也可以替换成文字,等各种元素,


div 内容水平垂直居中的更多相关文章
- css3 flex 详解,可以实现div内容水平垂直居中
先说一下flex一系列属性: 一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row- ...
- div盒子水平垂直居中方法
文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...
- div盒子水平垂直居中的方法推荐
父盒子是position:relative 方法一:(宽高确定) div绝对定位水平垂直居中[margin 负间距], 方法二: (宽高确定) div绝对定位水平垂直居中[margin:auto实现绝 ...
- css的div动态水平垂直居中
div动态水平垂直居中,思路如下: (1)先定位.如果相对于距离最近的父元素,用absolute:如果相对于body,用fixed. (2)然后,top和left都设为50%. (3)要居中的di ...
- div中的内容水平垂直居中
1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...
- div中的“内容”水平垂直居中
1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...
- div 里面内容水平垂直居中
css .main{ background: #999999; width: 600px; height: 400px; /*采用flex方式*/ display: flex; /*div内容垂直居中 ...
- div盒子水平垂直居中的方法
这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用.内容块定义t ...
- Div实现水平垂直居中
在实际应用中很多地方不仅要求实现元素的水平居中或者垂直居中效果,还可能会在水平方向和垂直方向上都要实现居中效果,下面就简单介绍几种元素水平垂直居中的方法(注:不同的方法会存在一些优缺点以及兼容性问题) ...
随机推荐
- Day 1 初识python
1.Python简介 Python的历史 1989年圣诞节:Guido von Rossum开始写Python语言的编译器. 1991年2月:第一个Python编译器(同时也是解释器)诞生,它是用C语 ...
- eas之KDPrinter控件
初始化打印控件KDPrinter ctrlPrinter = new KDPrinter(); 增加列 // 指定插入位置table.addColumn(index);// 插入到最后table.ad ...
- eas之style接口
Obj可以是KDTable对象,也可以是IRow,IColumn,ICell对象锁定Obj.getStyleAttributes().setLocked(true);Obj.getStyleAttri ...
- 【剑指Offer】18、二叉树的镜像
题目描述: 操作给定的二叉树,将其变换为原二叉树的镜像. 解题思路: 求一棵树的镜像的过程:先前序遍历这棵树的每个结点,如果遍历到的结点有子结点,就交换它的两个子结点.当交换完所有的非 ...
- nyoj23-取石子(一)
取石子(一) 时间限制:3000 ms | 内存限制:65535 KB 难度:2 描述 一天,TT在寝室闲着无聊,和同寝的人玩起了取石子游戏,而由于条件有限,他/她们是用旺仔小馒头当作石子.游戏的 ...
- Deepin & ROMS 安装详细流程
按照这个过程,完美安装,当然并不能排除会出现其他的问题.如果遇到了,那就老老实实上网搜吧.
- Java设计模式之 — 组合(Composite)
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/9153753 听说你们公司最近新推出了一款电子书阅读应用,市场反应很不错,应用里还有 ...
- tp5 异常处理
=== <?php/** * Created by PhpStorm. * User: 14155 * Date: 2018/11/10 * Time: 0:26 */ namespace ap ...
- linux下最简单的端口转发工具
linux下简单好用的工具rinetd,实现端口映射/转发/重定向 官网地址http://www.boutell.com/rinetd 软件下载wget http://www.boutell.com/ ...
- EF--复杂类型
介绍EF复杂类型的文章 我理解的复杂类型就是简化了编码的操作,实际上在数据库中还是按照约定生成相应的类似"类名_类名"的表结构 public class CompanyAddres ...