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实现水平垂直居中
在实际应用中很多地方不仅要求实现元素的水平居中或者垂直居中效果,还可能会在水平方向和垂直方向上都要实现居中效果,下面就简单介绍几种元素水平垂直居中的方法(注:不同的方法会存在一些优缺点以及兼容性问题) ...
随机推荐
- NOIP2016 DAY2 T3 愤怒的小鸟
传送门 题目描述 Kiana 最近沉迷于一款神奇的游戏无法自拔. 简单来说,这款游戏是在一个平面上进行的. 有一架弹弓位于 (0,0)(0,0) 处,每次 Kiana 可以用它向第一象限发射一只红色的 ...
- 常用rides命令
rides使用步骤 1.源代码构建安装 1.下载,Linux下命令wget http://redis.io/download下载redis的包 2.解归档Linux下命令tar -xvf redis- ...
- layui 导出excel复杂表头
众所周知 layui的导出功能很好用,但是今天我要给大家推荐一个更好用的 大家来到这里想必也是因为layui无法满足 [导出Excle复杂表头] 的业务需求而来,这里废话不多说但还是强调一点,如果你是 ...
- 39.exact value and full text
主要知识点 1.exact value 2.full text 在es中有两种搜索方式,exact value(精确匹配),full text(全文检索) 一.exact value 比如有一 ...
- PHP和zookeeper结合实践
Zookeeper 简单介绍 Apache Zookeeper是开发和维护开源服务器的服务,它能够实现高度可靠的分布式协调. 安装Zookeeper(无需安装) wget http://mirror. ...
- ecshop3 调用指定分类下推荐/热卖/新品商品,可指定调用数量
第一步:--------------------------------------------------------------------------------------/** * 取指定分 ...
- 学习EXTJS6(4)基本功能-信息提示框组件
1.使用组件,主要配置表现形式有二种(是否可以说参数) 用逗号分隔的传统参数列表方式: <script type="text/javascript"> Ext.onRe ...
- Mysql学习总结(12)——21分钟Mysql入门教程
21分钟 MySQL 入门教程 目录 一.MySQL的相关概念介绍 二.Windows下MySQL的配置 配置步骤 MySQL服务的启动.停止与卸载 三.MySQL脚本的基本组成 四.MySQL中的数 ...
- web开发如何使用高德地图API(一)浏览器定位
说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...
- 解读grub.conf文件
我们将来看看grub.conf文件内语句,(注:...)内的东西是我们的解读内容. # grub.conf generated by anaconda # # Note that you do not ...