对于前端布局来说。总有一些图片水平垂直居中老是不好看,影响整体美观,百度一大堆各种自适应方法,终于找到了一种比较简单,适用于所有场景的方法。。

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 内容水平垂直居中的更多相关文章

  1. css3 flex 详解,可以实现div内容水平垂直居中

    先说一下flex一系列属性: 一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row- ...

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

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

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

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

  4. css的div动态水平垂直居中

      div动态水平垂直居中,思路如下: (1)先定位.如果相对于距离最近的父元素,用absolute:如果相对于body,用fixed. (2)然后,top和left都设为50%. (3)要居中的di ...

  5. div中的内容水平垂直居中

    1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...

  6. div中的“内容”水平垂直居中

    1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...

  7. div 里面内容水平垂直居中

    css .main{ background: #999999; width: 600px; height: 400px; /*采用flex方式*/ display: flex; /*div内容垂直居中 ...

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

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

  9. Div实现水平垂直居中

    在实际应用中很多地方不仅要求实现元素的水平居中或者垂直居中效果,还可能会在水平方向和垂直方向上都要实现居中效果,下面就简单介绍几种元素水平垂直居中的方法(注:不同的方法会存在一些优缺点以及兼容性问题) ...

随机推荐

  1. 八进制、十进制、操作符(day04)

    把二进制表示的数字从右向左每三个数位分成 一组,每组用一个0到7之间的数字替换. 这个替换结果叫做数字的八进制表示方式 (八进制) 可以直接在程序里用八进制方式表示数字, 这种数字必须以0做开头 可以 ...

  2. SSH(远程登录)

    在linux中SSH服务对应两个配置文件: ssh特点:在传输数据的时候,对文件加密后传输. ssh作用:为远程登录会话和其他网络服务提供安全性协议. ssh小结: 1.SSH是安全的加密协议,用于远 ...

  3. Netty学习总结(2)——Netty的高性能架构之道

    Netty是一个高性能.异步事件驱动的NIO框架,它提供了对TCP.UDP和文件传输的支持,作为一个异步NIO框架,Netty的所有IO操作都是异步非阻塞的,通过Future-Listener机制,用 ...

  4. 理解__builtin_clz特性

    a.c: /************************************************************************* * File: a.c * Brief: ...

  5. hdu 4857 逆向拓扑排序+反向输出

    /*一组测试实例 4 4 2 3 1 2 4 */ #include<stdio.h> #include<string.h> #include<queue> usi ...

  6. [bzoj4127]Abs_树链剖分_线段树

    Abs bzoj-4127 题目大意:给定一棵数,支持链加和链上权值的绝对值的和. 注释:$1\le n,m \le 10^5$,$\delta \ge 0$,$|a_i|\le 10^8$. 想法: ...

  7. axios 全攻略之基本介绍与使用(GET 与 POST)

    axios axios 是一个基于 Promise 的 HTTP 客户端,专门为浏览器和 node.js 服务 Vue 2.0 官方推荐使用 axios 来代替原来的 Vue request,所以这里 ...

  8. codeforces Round #258(div2) C解题报告

    C. Predict Outcome of the Game time limit per test 2 seconds memory limit per test 256 megabytes inp ...

  9. 从OTF字体文件里查找字体名称

    for in ? 使用神器vim就好了. . . vim ./AKZIDENZGROTESK-COND.OTF

  10. Exchanger源代码剖析

    Exchanger是一个针对线程可以结对交换元素的同步器.每条线程把某个对象作为參数调用exchange方法,与伙伴线程进行匹配.然后再函数返回的时接收伙伴的对象.另外.Exchanger内部实现採用 ...