css样式垂直居中,css中垂直居中的方法

怎么使用CSS让图片水平垂直都居中？

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

CSS水平居中与垂直居中的总结

1. 设置 margin: 0 auto;

单行文本垂直居中，通过设置行高为父元素高度（父元素高度已知）。

图片垂直居中，设置上下padding（父元素高估不设置）。

图片垂直居中，下边这种方法会有一定偏差（父元素高估不设置）。

图片垂直居中，图片作为背景。

1. 若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。

行内元素可可以转换为inline-block实现居中。

CSS文字垂直居中

01

先写上html代码，如图，内容很简单，就是一个div里有一段文本。

02

再写上div对应的样式，如图，这里只设置了div的边框和高度，宽度。

03

如果这里显示的话，我们看下页面，文本是不会水平居中和垂直居中的。

04

要让文本水平居中，我们可以添加样式：text-align: center;

要让文本垂直居中，我们可以添加样式： vertical-align: middle;和display: table-cell;

05

添加完这几个样式后，刷新页面可以看到现在的文本已经可水平居中和垂直居中了。

用CSS 实现元素垂直居中，有哪些好的方案

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%);

这个基本可以不确定宽高的模块居中，但是在低版本的浏览器中可能出现问题，现在还没测试过，但是主流的都是可以的！

CSS实现垂直居中的7种方法

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完成水平垂直居中。