css图片居中

主要内容

学习文献

元素居中

胡子哥 — 谈一谈我在阿里的成长 + 2

左右布局

几种常见的CSS布局 —— 掘金

BFC

实现三栏布局的几种方法—— github

实现多列等高布局

—

水平垂直居中，面试必考题 - 颜海镜 —— 小志-span标签居中兼容好

前端周刊-博主+ CSS学习笔记+小志面试2

腾讯白树的两端对齐方法

摘自颜海镜的博客：

参考文献：最全面的水平垂直居中方案与flexbox布局1、纯css未知高度图片垂直居中：

父元素设置 display: table-cell;这个时候元素的父元素就相当于变成了表格的单元格，再这个单元格设置vertical-align:middle;即可实现内容垂直居中；这种方法的优点在于对低版本的浏览器兼容性很好，可以放心使用；

css:

.box {

//非IE的主流浏览器识别的垂直居中的方法

display: table-cell;

vertical-align:middle;

text-align: center;

width: 200px;

height: 200px;

border: 1px solid #eee;

}

.box .img {

//设置图片垂直居中

vertical-align: middle;

}

2、利用定位和位移 transform: translate(x , y); 在未知宽高的情况下：

给要居中的子元素设置绝对定位 position: absolute;

而元素的父级添加相对定位 position: relative; 限制绝对定位元素在其盒子内部；/* 代码：*/

.box {

width: 100%;

height: 100%;

position: relative;

}

.box .img {

position: absolute;

top: 50%;

left: 50%;

width: 100px;

height: 100px;

transform: translate(-50%, -50%);

}

当父元素是长方形的宽度时 ，.img可以用 width: 100%;

当父元素是正方形的宽度时 ，.img可以用 height: 100%;

适合未知宽高的情况下，元素水平垂直居中；

布局篇：

flex左右布局可以参考WEUI组件的写法；地址：weui组件

1、固定宽高左浮动，右侧自适应.wrap {

width: 80%;

height: 400px;

margin: 0 auto;

border: 1px solid red;

}

.left {

width: 200px;

height: 300px;

float: left;

background: #ccc;

}

.right {

height: 100%;

margin-left: 200px;

background: #ddd;

}

.clearfix {

zoom: 1;

}

.clearfix:after {

content: '.';

display: block;

height: 0;

clear: both;

overflow: hidden;

visibility: hidden;

}

2、绝对定位+外边距.wrap {

position: relative;

width: 80%;

height: 400px;

margin: 0 auto;

border: 1px solid red;

}

.left {

position: absolute;

top: 0;

left: 0;

width: 200px;

height: 300px;

background: #ccc;

}

.right {

height: 100%;

margin-left: 200px;

background: #ddd;

}

3、利用BFC特性：.wrap {

width: 80%;

height: 400px;

margin: 0 auto;

border: 1px solid red;

}

.left {

width: 200px;

height: 300px;

float: left;

background: #ccc;

}

.right {

height: 100%;

overflow: hidden;

background: #ddd;

}

在给第二个子元素设置了overflow:hidden ， 它就生成了一个BFC块 ；

BFC其中的一个布局规则就是不会和float box 发生重叠，于是就和第一个浮动了的子元素隔开了；

也可以利用flex进行两列等高布局，不过要考虑到其兼容问题；1、display: table-cell 实现多列等高布局:

将容器设为display:table然他成为一个块级表格元素，子元素display:table-cell使子元素成为表格单元格;.wrap {

display: table;

overflow: hidden;

}

.left {

display: table-cell;

width: 200px;

background: #4caf50;

}

.right {

display: table-cell;

width: 800px;

background: #99afe0;

}

2、padding + margin + overflow，实现多列等高效果，兼容性好

.wrap {

position: relative;

overflow: hidden;

}

.left {

float: left;

width: 200px;

padding-bottom: 9999px;

margin-bottom: -9999px;

background: #4caf50;

/* 可以做到左侧固定宽度，右侧宽度响应式效果

position: absolute;

*/

}

.right {

float: left;

width: 800px;

padding-bottom: 9999px;

margin-bottom: -9999px;

background: #99afe0;

/*

width: 100%;

margin-left: 200px;

*/

}

相关阅读

2019独角兽企业

A5创业网(公众号：iadmin5)11月20日消息，针对近日有关天猫双11退货率等传言，天猫双11组委会在微博发布公告称，截止带11月18日退货率仅

文章主要讨论垂直领域对话机器人的设计，简单的阐述一下意图分析的典型思路和方法，并实现一个基本的意图分类器。那设计一款垂直领域

随着我国电商行业的发展，电商消费市场呈现出快速增长势头，而且越来越多的垂直行业类的电商平台或者网站开始出现，有的也获得了消费者

根据某大型垂直门户网站目前的网站优化和对外宣传的分析以及网站本身的特性，对网站的推广和优化宣传发表以下个人的看法和推广方法