css样式如何水平垂直,水平垂直居中css4种方法

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

CSS是层叠样式表。下面，我们来看看怎么使用CSS让图片水平垂直都居中吧。

创新互联专注于大观企业网站建设,成都响应式网站建设公司,商城网站定制开发。大观网站建设公司,为大观等地区提供建站服务。全流程按需求定制网站，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务

新建一张文档

在桌面新建一张文本文档，改名为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中让元素垂直水平居中的几种方法

CSS中，如果我们想让元素水平垂直居中，有很多种方法可以达成我们想要的效果。

接下来就来看看有哪些方法。

CSS文字垂直居中

01

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

02

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

03

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

04

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

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

05

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