绝对定位实现居中布局运用

发布时间：2023-03-28 13:27:12 所属栏目：教程来源：

导读：居中布局通常分为两种，一种是固定宽高，另一种是非固定宽高。

固定宽高很好理解，非固定宽高通常都是靠里面的内容来撑起盒子的高度，内容时多时少。

这两种方式也造就了不一样的技术实现，我们来看一下。

居中布局通常分为两种，一种是固定宽高，另一种是非固定宽高。

固定宽高很好理解，非固定宽高通常都是靠里面的内容来撑起盒子的高度，内容时多时少。

这两种方式也造就了不一样的技术实现，我们来看一下。

假如我们有一个宽度占 70%，高度占 25% 的盒子，我们可以这么写：

<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认样式 */
* { padding: ; margin: ; }
/* 令html和body全屏显示, 并有一个灰色背景 */
html, body { height: ; background: gray; }
/* 先在父元素上设置相对定位 */
body { position: relative }
.center {
/* 绝对定位 */
position: absolute;
/* 上下左右全部为0 */
top: ;
right: ;
bottom: ;
left: ;
/* 给定宽高 */
width: ;
height: ;
/* 令外边距自动填充 */
margin: auto;
/* 白色背景 */
background: white;
}
</style>
</head>
<body>
<div class="center"></div>
</body>
</html>

代码说明：
如果不给定宽高，盒子将会和父元素一样大，因为绝对定位上下左右都是 0，意为紧贴着父元素的边。
给了固定宽高，但没写 margin 的话盒子会固定在左上角，因为 top 和 left 的优先级更高。
给了 margin: auto; 的话，浏览器会自动填充边距，令其居中。
此种实现方式优点是兼容性很好，几乎没用到任何 CSS 的新特性，全部都是经典属性。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!