css 图片 页面居中代码

CSS是现代网页中不可缺少的一部分，通过CSS我们可以为网页添加样式，其中图片居中是网站设计的基本要求之一，本文将为大家介绍如何通过CSS实现图片页面居中。

在网页设计中，图片居中分为垂直居中和水平居中。下面分别为大家介绍如何实现。

水平居中的实现方法：

    <style>
        #image {
            display: block; /* 必须将图片设置为块级元素 */
            margin: 0 auto; /* 将左右边距设为auto */
        }
    </style>
    <img id="image" src="path/to/image.png">

垂直居中的实现方法：

    <style>
        #container {
            position: relative; /* 将容器设置为相对定位 */
            height: 600px; /* 设置容器高度，方便垂直居中 */
        }
        #image {
            position: absolute; /* 将图片设置为绝对定位 */
            top: 50%; /* 将上边距设为50% */
            transform: translateY(-50%); /* 将图片上移50%自身高度的一半 */
        }
    </style>
    <div id="container">
        <img id="image" src="path/to/image.png">
    </div>

以上代码即可实现图片水平或垂直居中，适用于各种情况。希望各位同学在网页设计中，能够善用CSS，为网站带来更加美好的展示效果。