固定宽度高度的页面在不同分辨率的屏幕上垂直水平居中

固定宽度，高度的页面在不同分辨率的屏幕上垂直，水平居中，可以按照下面的方法实现：

在 CSS 样式表中设置 body 元素、html 元素的高度为100%：

body, html { 
    height: 100%;
}

使用 flexbox 来实现垂直水平居中，首先在 body 元素中设置 display:flex，将页面变成 flex 容器，然后在子元素中设置 margin: auto，将元素居中。

示例一：页面包含一个 div 元素，需要垂直水平居中。

<!DOCTYPE html>
<html>
<head>
    <title>垂直水平居中</title>
    <style type="text/css">
        body, html { 
            height: 100%;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        div {
            width: 300px;
            height: 200px;
            margin: auto;
            background-color: #f2f3f4;
        }
    </style>
</head>
<body>
    <div>这是一个 div 元素</div>
</body>
</html>

在上述示例中，设置了 body 元素的 display 属性为 flex，并使用 justify-content 让元素水平居中，使用 align-items 让元素垂直居中。此外，设置了 div 元素的宽度、高度和 margin:auto，使其在父元素中水平、垂直居中。

示例二：页面包含一个 img 元素，需要垂直水平居中。

<!DOCTYPE html>
<html>
<head>
    <title>垂直水平居中</title>
    <style type="text/css">
        body, html { 
            height: 100%;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        img {
            width: 200px;
            height: 100px;
            margin: auto;
        }
    </style>
</head>
<body>
    <img src="https://picsum.photos/200/100" alt="图片">
</body>
</html>

在上述示例中，同样使用了 body 元素的 display 属性为 flex，使用 justify-content 和 align-items 属性实现元素的水平、垂直居中。此外，设置了 img 元素的宽度、高度和 margin:auto，使其在父元素中水平、垂直居中。

通过上述的示例可以发现，在实现固定宽、高的页面在不同分辨率的屏幕上垂直、水平居中时，关键是使用 flexbox 布局，通过设置父元素和子元素的 flex 属性及 margin:auto 属性来实现居中。同时在 css 样式表中设置 body、html 元素的高度为 100%，确保页面元素的垂直居中效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：固定宽度高度的页面在不同分辨率的屏幕上垂直水平居中 - Python技术站