css图片如何垂直水平居中设置

css设置图片垂直居中的方法：

一、使用flex实现垂直居中

利用css flex实现垂直居中，有些浏览器可能不兼容flex。

首先要创建一个包裹着图片的div元素，然后定义基础属性。

以下图片img宽度为（设置为）100px，高度为100px。

HTML代码部分：

<style>
.flexbox{width: 300px;height: 250px;background:#ccc;display: flex;align-items: center;text-align:center; }
.flexbox img{width: 100px;height: 100px;margin:0 auto;}
</style>
<div class="flexbox">
<img src="img.png" alt="">
</div>

二、利用Display: table;实现img图片垂直居中

1、先创建一个div元素以及另外一个包含图片的div元素，设置样式

2、给img父元素设置display：table

3、包裹图片的父类div元素设置display:table-cell

<style>
.tablebox{width: 300px;height: 300px;background: #fff;display: table;background: #ccc;}
#imgbox{display: table-cell;vertical-align: middle;    text-align: center;}
#imgbox img{width: 100px;}
</style><div class="tablebox">
<div id="imgbox">
<img src="img.png" alt="">
</div>
</div>

三、用绝对定位实现垂直居中

<style>.posdiv{width: 300px;height: 300px;background: #eee;position: relative; text-align:center; }
.posdiv img{width: 100px;position: absolute;top: 50%;margin-top: -50px;margin-left: -50px;}
</style>
<div class="posdiv">
<img src="img.png" alt="">
</div>

css图片如何垂直水平居中设置相关推荐

CSS实现DIV垂直水平居中
CSS实现DIV垂直水平居中在页面设计中,很多地方都需要div的垂直水平居中,在前端开篇的学习中,也是使用较多的地方,所以我整理了三种方法帮助大家去解决问题,代码可直接使用,仅供参考学习. 方法方 ...
css 怎么设置盒子水平居中,用一段css实现盒子垂直水平居中方法(8种)-案例
效果图 - 在线案例 css3中的属性:transform: translate(x,y) .box { width: 100px; height: 100px; background: orange ...
html body不定宽居中,纯CSS实现元素垂直水平居中-非固定宽度
这里不讨论行内元素的居中!! 盒子垂直居中+水平居中的需求时经常遇到的,看到的较多实现逻辑是固定content-box的宽度,通过让margin-left和margin-top等于宽或高的负一半来实现 ...
CSS里各种垂直水平居中方式的基础用法
首先,依旧是概念.介绍一下行内元素和块级元素,这个很重要,因为有的属性只能用于块元素,而有的正好相反,在一定的情况下,它们也可以相互转换,比如用display来进行设置. 行内元素(又叫内联元素inl ...
html图片不平铺,css图片不平铺怎么设置？
css的background-repeat 属性定义了图像的平铺模式.从原图像开始重复,原图像由 background-image 定义,并根据 background-position 的值放置. c ...
html元素垂直水平居中显示,关于css:html-元素垂直水平居中
一. 不定宽高元素程度垂直居中 1.transform: translate() 程度垂直居中 .wrapper{ background-color: #eee; height:200px; } .c ...
css面试题实现元素垂直水平居中-包括未知宽高的元素五种回答
css实现元素垂直水平居中-包括未知宽高的元素这个一道很经典的面试题,做项目中也常会出现这样的需求. 现在我就用几种比较常用的方法.兼容性也列出来. 第一种已知宽高(定位加负边距解决)兼容到IE6 ...
css设置图标居左_「css图片居中」css - 常用垂直/水平居中 + 左右布局 - seo实验室...
css图片居中主要内容学习文献元素居中胡子哥 - 谈一谈我在阿里的成长 + 2 左右布局几种常见的CSS布局 -- 掘金 BFC 实现三栏布局的几种方法-- github 实现多列等高布局 ...
关于css设置元素垂直水平居中的问题
第一种: 利用定位属性实现,但需要知道元素的宽高 <div class="box"></div><style>.box{weight:200px ...

css图片如何垂直水平居中设置

css图片如何垂直水平居中设置相关推荐

最新文章

热门文章