首页 > 开发 > CSS > 正文

设置一个DIV块固定在屏幕中央的两种方法(推荐)

2024-07-11 08:34:50
字体:
来源:转载
供稿:网友

方法一:

对一个div进行以下设置即可实现居中。

CSS Code复制内容到剪贴板

<style>   
#a{   
    position: fixed;   
    top: 0px;   
    left: 0px;   
    rightright: 0px;   
    bottombottom: 0px;   
    margin: auto;   
}   
</style>  

XML/HTML Code复制内容到剪贴板

<!doctype html>  
<html lang="zh-cn">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style>  
        *{   
            margin: 0px;   
            padding: 0px;   
        }   
        #a{   
            width: 200px;   
            height: 200px;   
            background-color: aquamarine;   
            position: fixed;   
            top: 0px;   
            left: 0px;   
            right: 0px;   
            bottom: 0px;   
            margin: auto;   
        }   
    </style>  
</head>  
<body>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表