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

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. C# 发起Get和Post请求

    public class ApiHelper { //contentType application/json or application/xml public string HttpGet(str ...

  2. 【剑指Offer】43、左旋转字符串

      题目描述:   汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果.对于一个给定的字符序列S,请你把其循环左移K位后的序列输出.例如,字符序列S ...

  3. 获取元素属性中的[x] 标签: javascript 2016-12-24 22:35 105人阅读 评论(0)

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  4. jquery 绑定回车(Enter )事件

    全局: $(function(){ document.onkeydown = function(e){ var ev = document.all ? window.event : e; if(ev. ...

  5. 【1】Django概述

    道生一,一生二,二生三,三生万物 无名天地之始,有名万物之母 ——老子 python程序web项目开发,是非常重要的一部分,Python为基础的web项目开发的框架有很多,django无疑是最强大we ...

  6. vue+ElementUI 日期选择器 获取时间戳

    <div class="block"> <span class="demonstration">daterange</span&g ...

  7. ZOJ 3362 Beer Problem

    Beer Problem Time Limit: 2000ms Memory Limit: 32768KB This problem will be judged on ZJU. Original I ...

  8. SE955 激光扫描头设置 通过SSI串口进行设置

    扫描头是能够进行配置的,使其支持与禁用某些条码类型,设置有两种方式,一种是扫一下相应的设置条码,还有一种是通过SSI(simple serial interface)来设置,以下就讲一下SSI的设置方 ...

  9. Linux 服务具体解释

    acpid ACPI(全 称 Advanced Configuration and Power Interface)服务是电源管理接口. 建议全部的笔记本用户开启它. 一些server可能不须要 ac ...

  10. 【cl】eclipse配置svn

    查看Eclipse版本号 http://jingyan.baidu.com/article/020278118660e81bcd9ce545.html Window>preferences输入S ...