小方块万能居中方法(任何分辨率下都能居中)

Posted syf976561581

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小方块万能居中方法(任何分辨率下都能居中)相关的知识,希望对你有一定的参考价值。

不说废话直接看代码都是干货
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 <style>
     div{
         position: absolute;
         width: 200px;
         height: 200px;
         left: 50%;
         top: 50%;
         margin-left:-100px;
         margin-top: -100px;
          background-color: turquoise;
     }
 </style>    
</head>
<body>
    <div></div>
</body>
</html>

这样就能实现任何分辩率下居中了,如果各位需要别的大小颜色的话,可以自行修改代码的宽高和color呦

以上是关于小方块万能居中方法(任何分辨率下都能居中)的主要内容,如果未能解决你的问题,请参考以下文章

怎么让图片在不同分辨率下都居中?

图片宽度为2000px,使图片在电脑不同分辨率下都水平居中,不压缩。

html 有关如何在任何页面上插入Nuvo Express按钮的小片段。此按钮居中对齐,并在新窗口中打开目标URL。

水平垂直居中的——万能好用方法

怎么使自己的网页在任何分辨率的显示器上都居中显示

一种让超大banner图片不拉伸全屏宽居中显示的方法