大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
CSS是层叠样式表。下面,我们来看看怎么使用CSS让图片水平垂直都居中吧。
成都创新互联公司服务热线:18982081108,为您提供成都网站建设网页设计及定制高端网站建设服务,成都创新互联公司网页制作领域10余年,包括成都木包装箱等多个行业拥有丰富的网站营销经验,选择成都创新互联公司,为企业锦上添花。
新建一张文档
在桌面新建一张文本文档,改名为1.txt,如下图所示:
基础代码
然后打开文本文档,编写基础代码,再把桌面上的老虎图片引入进去,如下图所示:
后缀名
然后把文本文档后缀名改为.html,如下图所示:
运行网页
然后在浏览器中运行网页,现在图片有了,只是还没有居中,图片居住代码要用CSS写,如下图所示:
CSS代码
然后写上CSS代码,如下图所示:
垂直水平居中
可以看到图片已经垂直和水平居中,如下图所示:
总代码
!DOCTYPE html
head
titlehtml/title
style type="text/css"
.picTiger{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/style
/head
body
img class="picTiger" src="C:/Users/Administrator/Desktop/1.jpg"
/body
html
1. 设置 margin: 0 auto;
单行文本垂直居中,通过设置行高为父元素高度(父元素高度已知)。
图片垂直居中,设置上下padding(父元素高估不设置)。
图片垂直居中,下边这种方法会有一定偏差(父元素高估不设置)。
图片垂直居中,图片作为背景。
1. 若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。
行内元素可可以转换为inline-block实现居中。
01
先写上html代码,如图,内容很简单,就是一个div里有一段文本。
02
再写上div对应的样式,如图,这里只设置了div的边框和高度,宽度。
03
如果这里显示的话,我们看下页面,文本是不会水平居中和垂直居中的。
04
要让文本水平居中,我们可以添加样式:text-align: center;
要让文本垂直居中,我们可以添加样式: vertical-align: middle;和display: table-cell;
05
添加完这几个样式后,刷新页面可以看到现在的文本已经可水平居中和垂直居中了。
css垂直居中,如果兼容各个浏览器的话,我还没有见过。
在百度里面搜了很多,代码都不健壮,最终都是用js来实现的。
首先,我们来了解水平居中,它有很多种方法,我们暂时先来了解其中的几种:
1. 在实现方案中,我们最熟悉的莫过于给元素定义一个宽度,然后使用margin:
body{
width:960px;
margin:0 auto;
}
这个是当我们的定义元素的宽度时显现的,如果我们不能定义宽度时,该怎么办呢?
2. 我们对于定位也是常用的,在这里当然也可以采用定位的方法来实现:
body{
position:absolute;
left:50%;
}
3. 既然定位可以,那浮动也是可以的:
body{
float:left;
right:50%;
}
4. 对于几个元素同时居中在一条线上
body{
vertical-align:middle;
}
5. 利用table:
ul{
display:table;
}
ul li{
display:table-cell;
}
6. 还可以使用inline-block来实现,但要使用这个就得在其父元素上设置text-align.如下:
body{
text-align:center;
}
.content{
display:inline-block;
}
实现垂直居中的四种方法:
1. 只能是单行文本居中(可适用于所有浏览器):
.content{
height:100px;
line-height:100px;
}
2. 跟水平居中一样,垂直也可以用定位的方法:
.content{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
或者
.content{
position:absolute;
top:50%;
}
定位的方法,它的缺点是当没有足够的空间时,元素会消失。
3. 对此,浮动也是可以的:
.content{
float:left;
height:50%;
margin-bottom:-120px;
}
.footer{
clear:both;
height:240px;
position:relative;
}
对于浮动,我们需要在之后清除,并显示在中间。
4. 也可以使用vertical-align属性:
.content{
display:table-cell;
vertical-align:middle;
}
这种方法可以随意改变元素高度,但在IE8中无效。
现在来看个div模块在屏幕中居中的例子:
position: absolute; top: 50%; left: 50%; //上下移动屏幕的50%
margin: auto;
-webkit-transform: translate(-50%,-50%); //减去自身的50%(多移动的)
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
这个基本可以不确定宽高的模块居中,但是在低版本的浏览器中可能出现问题,现在还没测试过,但是主流的都是可以的!
HTML:
CSS:
重点:父容器高度和子元素line-height一样的数值,内容中的行内元素就会垂直居中。
HTML:
CSS:
重点:给父元素添加一个伪元素::before,让这个伪元素的div高度为100%,这样其他div就可垂直居中了,但div 本身就是块级元素,而vertical-align是行内元素属性,则需要修改为inline-block。
HTML:
CSS:
重点:在父元素中设置相对定位position: relative,子元素设置绝对定位 position: absolute;top和left相对父元素的50%,与其搭配的 transformse: translate(-50% , -50%)表示X轴和Y轴方向水平居中。
HTML:
CSS:
重点:子元素绝对定位position:absolute,父元素相对定位position: relative,将上下左右的数值都设置为0,同时margin:auto。绝对定位是会脱离文档流的,这点要注意一下。
HTML:
CSS:
重点:给父元素设置display: flex布局,水平居中 justify-content: center,垂直居中align-items: center。
HTML:
CSS:
重点:父元素position定位为relative,子元素position定位为absolute。水平居中同理。calc居中要减多少要结合到自己的宽高设置多少再进行计算。
HTML:
CSS:
重点:将父元素设置display:table,子元素table-cell会自动撑满父元素。组合 display: table-cell、vertical-align: middle、text-align: center完成水平垂直居中。