利用flex弹性布局实现图片水平及垂直方向居中

display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局

注意：（Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。）

1.将图片水平方向居中：

justify-conten：用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>图片居中</title><style>*{margin: 0 ;padding: 0;}.test{width: 500px;height: 500px;margin: 0 auto;border: 2px solid red;display: flex;justify-content: center;}.test2{width: 50px;height: 50px;}</style>
</head>
<body><div class="test"><img class="test2" src="./slide-3.jpg" alt=""></div>
</body>
</html>

2.将图片垂直方向居中：

align-items：属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>图片居中</title><style>*{margin: 0 ;padding: 0;}.test{width: 500px;height: 500px;margin: 0 auto;border: 2px solid red;display: flex;align-items: center;}.test2{width: 50px;height: 50px;}</style>
</head>
<body><div class="test"><img class="test2" src="./slide-3.jpg" alt=""></div>
</body>
</html>

利用flex弹性布局实现图片水平及垂直方向居中相关推荐

弹性（flex）布局实现图片水平垂直居中
<div class="photo my1"><img src="./public/img/1.png"><div class=& ...
页面布局 - flex弹性布局
flex弹性布局 html: <!DOCTYPE html> <html><head><meta charset="utf-8" /> ...
Flutter 布局Row（水平方向布局）、Column（垂直方向布局）、Wrap（可以自动换行的布局）、Flex（弹性布局）、Stack（叠层布局）、
1.线性布局 Row 水平方向布局 Row({... //表示水平方向子组件的布局顺序(是从左往右还是从右往左),//默认为系统当前Locale环境的文本方向(如中文.英语都是从左往右,而阿拉伯语是从 ...
移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
微信小程序开发（三)——IE盒子，Flex弹性布局，色子六面
目录 ie盒子模型 Flex弹性布局三大特性: 块元素和内联元素的转换 background-image背景图片尺寸单位rpx 定位练习:色子的六面 ie盒子模型盒子模型是css中一个重要的概 ...
HTML中用弹性布局设置位置,HTML的flex弹性布局
flex 布局概述 1. flex 是什么flex 是 Flexible Box 的缩写,意为弹性布局 flex 2009 年就已出现,浏览器兼容性很好,请放心使用 2. flex 解决了什么问题块元 ...
CSS3 Flex 弹性布局用法详解
什么是Flex弹性布局 Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性. 说明: 1.flex是display的一个属性值.与之相当应的还 ...
移动端基础（2）—— flex弹性布局
一.flex弹性布局 flexible-box-layout 弹性盒式模型,它能更加高效的控制元素的对齐.排列,更重要的是能够自动计算布局内元素的尺寸,无论这个元素的尺寸是固定的还是动态的. 父元素( ...
flex弹性布局教程-04项目属性flex-grow
本节目标掌握flex-grow的使用. 掌握flex-grow放大的计算公式(难点). 掌握编写导航条的技巧. 内容摘要本篇介绍了项目属性 flex-grow,用于定义项目的扩大系数,用于分配容器 ...

利用flex弹性布局实现图片水平及垂直方向居中

利用flex弹性布局实现图片水平及垂直方向居中相关推荐

最新文章

热门文章