html/css系列-图片上下居中

aristark 发布于2019-08-29 15:39 / 1772人阅读

摘要：本文详情图片上下居中的问题常用的几种方法图片已知大小和未知大小，自行理解下图为其实状态和结束状态方法一单元表格的形式方法二弹性盒子布局方法三加方法四加方法五纯

本文详情:http://www.zymseo.com/276.html
图片上下居中的问题常用的几种方法:
图片已知大小和未知大小，自行理解

 .main{
     width: 400px;height: 400px;
     border: solid 1px red;
     text-align: center;
 }

下图为其实状态和结束状态：

方法一：diaplay:table-cell 单元表格的形式

 display:table-cell;
 vertical-align:middle;

方法二：flex;align-items: center;justify-content: center 弹性盒子布局

display:flex;
align-items:center;
justify-content:center;

方法三：position加margin

position: relative;

margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;

方法四：position加 transform

position: relative;

position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

方法五：纯position

position:relative;

position: absolute;
left: 50%;
top: 50%;
margin-left:-50px;
margin-top:-50px;

云服务器 GPU云服务器上下居中内容上下居中上下左右居中 java控件上下居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113467.html

html/css系列-图片上下居中

摘要：本文详情图片上下居中的问题常用的几种方法图片已知大小和未知大小，自行理解下图为其实状态和结束状态方法一单元表格的形式方法二弹性盒子布局方法三加方法四加方法五纯本文详情:http://www.zymseo.com/276.html图片上下居中的问题常用的几种方法:图片已知大小和未知大小，自行理解 .main{ width: 400px;height: 400px; ...

Kross 2019-08-02 10:39 评论0 收藏0
页面架构HTML+CSS ヾ(o◕∀◕)ﾉ常用居中&多列布局

CSS Reset 1.作用（1）清除浏览器默认样式（2）全局样式定义 2.特别注意（1）项目开发初期就定义好（2）reset.css 在引入的时候一定要放在第一位（3）不同的产品reset.css不一样 3.table合并边框间距 table { border-collapse: collapse; // 合并边框 border-spacing: 0; //边框间距。当 `borde...

NervosNetwork 2019-08-29 12:27 评论0 收藏0
页面架构HTML+CSS ヾ(o◕∀◕)ﾉ常用居中&多列布局

CSS Reset 1.作用（1）清除浏览器默认样式（2）全局样式定义 2.特别注意（1）项目开发初期就定义好（2）reset.css 在引入的时候一定要放在第一位（3）不同的产品reset.css不一样 3.table合并边框间距 table { border-collapse: collapse; // 合并边框 border-spacing: 0; //边框间距。当 `borde...

dingding199389 2019-08-01 16:42 评论0 收藏0
html+css 核心知识总结

摘要：空元素，主要讲下可算内联元素，因为可与其他元素同行，且宽高对其起作用。提示对内联元素宽高起作用，请使用谈谈对定位的理解生成绝对定位的元素，相对于定位以外的第一个父元素进行定位。 Html 1.解释，主要从utf-8展开，utf-8是一种字符编码，该编码是全世界通用的，意思是假如项目涉及多语言，那么只能使用该编码方式。是使用html5文档类型。告知浏览器的解析器，用什么文档类型 ...

jindong 2019-08-29 15:14 评论0 收藏0