垂直居中的方法总结

方法一：绝对定位

.photo{overflow: hidden;position: relative;width: 100%;height: 100%;}
img{width: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}

方法二：绝对定位

.photo{overflow: hidden;position: relative;width: 100%;height: 100%;}
img{width: 100%;position: absolute;top: 0;bottom: 0;left:0;right:0;margin:auto;}

方法三:table-cell

.photo{width: 100%;height: 100%;display:table-cell;text-align:center;vertical-align: middle;}
img{width: 100%;position: absolute;top: 0;bottom: 0;left:0;right:0;margin:auto;}

时间： 2025-01-02 04:32:12

垂直居中的方法总结的相关文章

实现元素垂直居中的方法(补充)

之前发过一次<实现元素垂直居中的方法>的文章,今天又碰到了更简便的方法,就是利用transform属性,特别是当要居中的元素宽度,高度未知时非常好使,废话不多说,直接上demo: <!DOCTYPE html><html><head lang="zh-cn"> <meta charset="UTF-8"> <title>居中的方法</title> <style

文字在div中垂直居中的方法，设置div的高度height和行高line-height一致

文字在div中垂直居中的方法,设置div的高度height和行高line-height一致,如 .containerdiv{ height:60px; line-height:60px; }

#CSS中水平居中和垂直居中的方法一. 水平居中 1.行内元素(文本,图片等) 如果被设置元素为文本.图片等行内元素时,可以通过给父元素设置` text-align:center;` 来实现 2.定宽块级元素可以通过设置“左右margin”值为“auto”来实现居中常用的有 `margin:0 auto; ` 也可以写成`margin-left:auto;margin-right:auto;` 3.不定宽块级元素有三种实现方法: * 加入 table 标签为需要设置的居中的元素外面

css的div垂直居中的方法，百分比div垂直居中

我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些div如何垂直居中呢?这篇文章,我总结一下. 固定高宽div垂直居中如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; margin-left:-100px; margin-top:-

使用CSS完美实现垂直居中的方法

使用XHTML+CSS来实现元素的垂直居中一直是前端开发中的一个比较复杂且棘手的问题,作为网页设计师或前端开发工程师,这个垂直居中问题也是必须掌握的技巧之一,一些互联网公司面试题中也会出现这类题目.今天暴风彬彬将分享一个完美通过CSS实现垂直居中的方法,该方法是由aka Yuh?发明的,这个方法也是目前暴风彬彬觉得最完美最简洁的CSS垂直居中实现方法.下面来看看暴风彬彬曾经总结的笔记,大家有不同意见请多拍砖: 先来看看实例效果Demo 该CSS垂直居中的条件: 1.已有一个已定义高度的容器(如<

单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中

单个未知大小图片在div里面垂直居中的方法...添加辅助元素挤一下位置达到居中 <div class="ServicesLiTopPic"> <i></i> <img class="YuYue1" src="images/ReserveServices/YuYue1.png" /> </div> .ServicesLiTopPic i { display:inline-block

四种垂直居中的方法

四种垂直居中的方法显示效果: 代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>四种垂直居中的方法</title> 6 </head> 7 <body> 8 <h1>方法一:</h1> 9 <div style="width:200px;

css样式水平居中和垂直居中的方法

水平居中(包含块中居中) 1. 定宽,左右margin为auto.(常规流块盒.弹性项目[不用定宽]) 例子:在box1盒子上设置宽,再设置margin:auto: <style> .box1 { width: 200px; height: 200px; background-color: black; margin: auto; } </style> <body> <div class="box-all"> <div class=

CSS垂直居中布局方法

整理一下个人认为比较好的CSS垂直居中的布局方法. 1. 绝对定位+负值margin. //长宽的设置只是为了说明,实际使用没有限制 <div id="container-outer"> <div id="container-inner"></div> </div> //CSS #container-outer { width: 200rem; height: 100rem; position: relative; }

CSS实现垂直居中的方法

垂直居中是CSS布局中十分常见的布局效果,在平时的工作中遇到的垂直居中布局大概分为以下的几类: 1,首先是单行文本居中,非常简单,只需要设置父级元素的高和行高相等,或者设置本身元素为内联块或者块元素,再设置高和行高相等就可以. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style>