css 定位元素上下左右居中

原创已于 2024-03-07 11:21:30 修改 · 969 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

于 2020-02-26 12:09:25 首次发布

CSS 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一种使用CSS实现的固定且居中的红色盒子布局方案。通过设置盒子的宽度、高度、背景颜色以及定位属性，使得该盒子能够在页面上保持固定位置，并在水平和垂直方向上居中显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>	
    <style>
        *{margin: 0; padding: 0;}  
		.box{
			width: 300px; height: 100px; background: red;
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
		}
    </style>
</head>
<body>	
    <div class="box"></div>
    
</body>
</html>