编程中如何让图片垂直居中？两种方案分享给大家

lex方法

首先给图片添加一个div，设置其宽高及基本属性，其次把div中的display元素设置成flex，最后给img添加align-items:center属性，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style tpye="text/css">
         body{ 
            background:#000
        }
        div{
            width: 900px;
            height: 800px;
            background:deeppink;
            display: flex;
            align-items: center;
        }
        div img{
            width: 579px;
            height: 282px;
            align-items: center;
        }
    </style>
</head>
<body>
<div>
    <img src="html.png" alt="">
</div>
</body>
</html>

看下效果

display方法

首先创建一个div，以及对有图片的div设置样式，给img的父级添加一个diaplay，并且属性为table，并且把包含图片的div中的display属性设置成table-cell，最后给有图片的div设置成vertical-align: middle; 属性，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style tpye="text/css">
        body{
            background: #bbb;
        }
        div{
            display: table;
            width: 900px;
            height: 700px;
            background: #f3f3f3;
            display: table-cell;
            vertical-align: middle;
        }
        div img{
            width: 282px;
        }
    </style>
</head>
<body>
<div>
    <img src="html.png" alt="">
</div>
</body>
</html>

效果图：

为Web开发人员，最常见的事情之一就是更改HTML元素的背景颜色。但是，如果您不了解如何使用CSS background-color属性，可能会产生混淆。在本文中，我们讨论以下几点

1.HTML元素的默认背景色值

2.如何更改div的背景颜色，这是非常常见的元素

3.该background-color属性会影响CSS盒子模型的哪些部分，以及

4.此属性可以采用的不同值。

元素的默认背景色

div的默认背景颜色是transparent。因此，如果您不指定div的背景色，它将显示其父元素的背景色。

更改Div的背景颜色

在此示例中，我们将更改以下div的背景颜色。

<div class="div-1"> I love HTML </div>
<div class="div-2"> I love CSS </div>
<div class="div-3"> I love JavaScript </div>

没有任何样式，它将在视觉上转换为以下内容。

让我们通过向类中添加样式来更改div的背景颜色。您可以通过尝试HTML文件中的示例进行操作。

<style>
    .div-1 {
        background-color: #EBEBEB;
    }
    
    .div-2 {
    	background-color: #ABBAEA;
    }
    
    .div-3 {
    	background-color: #FBD603;
    }
</style>

<body>
    <div class="div-1"> I love HTML </div>
    <div class="div-2"> I love CSS </div>
    <div class="div-3"> I love JavaScript </div>
</body>

这将导致以下结果：

看！我们已成功更改了该div的背景颜色。接下来，让我们更多地了解此属性。让我们看看background-color属性如何影响CSS-box模型的各个部分。

背景颜色和CSS Box模型

根据CSS框模型，所有HTML元素都可以建模为矩形框。每个盒子由4个部分组成，如下图所示。

如果您不熟悉Box模型，则可以查阅相关资料。问题是，当您更改div的背景颜色时，Box模型的哪一部分会受到影响？简单的答案是填充区域和内容区域。让我们通过一个例子来确认这一点。

<style>
    body {
        background-color: #ABBAEA;
    }
    div {
        height: 200px;
        margin: 20px;
        border: 5px solid;
        background-color: #FBD603;
    }
</style>
<body>
    <div>
        <p>This is the parent div which contains the div we are testing</p>

        <div>
            <p>This example shows that changing the background color of a div does not affect the border and margin of the div.</p>
        </div>
    </div>
</body>

这将导致：

从上面的示例中，我们可以看到空白区域和边框区域不受背景颜色变化的影响。我们可以使用border-color属性更改边框的颜色。边距区域保持透明，并反映父容器的背景色。

最后，让我们讨论background-color属性可以采用的值。

背景色值

就像color属性一样，background-color属性可以采用六个不同的值。让我们通过一个示例考虑三个最常见的值。在示例中，我们将div的背景色设置为具有不同值的红色。

<style>
    /* Keyword value/name of color */
    .div-1 {
        background-color: red;
    }
    
    /* Hexadecimal value */
    .div-2 {
       background-color: #FF0000;	 
    }
    
    /* RGB value */
    .div-3 {
    	background-color: rgb(255,0,0);
    }
    
</style>

<body>
    <div class="div-1">
        <p>The background property can take six different values.</p>
    </div>

    <div class="div-2">
        <p>The background property can take six different values.</p>
    </div>

    <div class="div-3">
        <p>The background property can take six different values.</p>
    </div>
</body>

注意，它们的结果都是相同的背景色。

该background-color属性可以采用的其他值包括HSL值，特殊关键字值和全局值。这是每个例子。

/* HSL value */
background-color: hsl(0, 100%, 25%;

/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;

额外注意

设置元素的背景色时，重要的是要确保背景色和其包含的文本颜色的对比度足够高。这是为了确保弱视人士可以轻松阅读文本。

第一个div的背景颜色与文本颜色之间的对比度不够高，每个人都看不到。因此，除非您是唯一正在使用的网站，并且您的视力非常好，否则应避免这种颜色组合。

第二个div在背景颜色和文本颜色之间具有更好的对比度。因此，它使人们更容易阅读和阅读。

结论

在本文中，我们看到了如何更改div的背景颜色。我们还讨论了CSS Box模型的哪些部分受背景颜色变化的影响。最后，我们讨论了background-color属性可以采用的值。

希望本文对您有所帮助。谢谢阅读。

网页美工设计培训老师了解，当w3c刚出的时候，三大门户十分不屑。清一色的table遍布整个首页,可是这样导致的问题不久就暴露出来了,搜索引擎爬虫难以解析复杂的table，而样式的改版也极为难受。

div+css，这个布局中，div承载的是内容，而css承载的是样式。内容和样式的分离对于所见即所得的传统table编辑方式确实是一个很大的冲击，尤其是设计人员很难接受设计一个他们不能立即看到的样式。不过div+css的好处实在是太明显了：

1、搜索引擎亲和力：

搜索引擎不会在意一个页面的设计或者构成。搜索引擎不可能“欣赏”设计漂亮新颖的页面；也不会去“排斥”颜色搭配丑陋的页面。它们只是默默地拿到它们需要的内容就离开。如果一个页面中涵盖了大量的table来描述构架，试想搜索引擎要花多大的代价才可以拿到真正有用的信息呢？

一般来说，table构架描述的页面，样式结构和内容信息大小比可能达到1：1甚至更高。而CSS+DIV构架的页面，虽然在客户端看来下载一个复杂的CSS 也要占用差不多的带宽，然而搜索引擎可以很方便的绕过这个css，而直接抓去div中的内容。这便是div的优势所在。带宽的稍多占用，完全显得微不足道，更何况一个冗余的table设计架构如果代码写的不好会占用更多的带宽。

2、重构页面的方便性。

网页美工设计培训老师觉得这个应用最经典的例子就是各大blog程序了。就如现在我用的LBS系统，以及流行的PJBLOG、php下面的WP、MT，都是采用div+css构架。内容和样式的分离导致我们在重构页面布局（更换皮肤）的时候，只用针对每一个div元素重新定义其具体位置、样式就行了。而在原来的table基础上进行改版,几乎必须改变所有的内容注入渠道,实在是太过于麻烦。

在线咨询

上一篇：常用的CSS命名规范大总结，非常实用（收藏）
下一篇：如何在浏览器账中查看网页的HTML源代码？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商