绝对定位+负边距实现居中布局
1. 前言
上一小节我们讲了利用绝对定位来进行居中布局。本小节继续讲另外一种 方法 实现居中布局。
但注意，本小节的"绝对定位+负边距"这种 方法 不适合绝对定位法那种宽百分之多少、高百分之多少这种相对单位，取而代之的是具体的数值。
2. 实例 代码
比如，这个例子我们设置居中的盒子宽度为 300px、高度为 200px：
<!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 ;
/* 上方和左方为50% */
top : ;
left : ;
/* 给定宽高 */
width : px ;
height : px ;
/* 上外边距为负的给定高度的一半 */
margin-top : -px ;
/* 左外边距为负的给定宽度的一半 */
margin-left : -px ;
/* 白色背景 */
background : white ;
}
</ style >
</ head >
< body >
< div class = " center " > </ div >
</ body >
</ html >
运行结果：
3. 小结
top: 50%; 和 left: 50%; 会让盒子的 左上角 定位到中央位置； 所以给上外边距和左外边距 一个 负值将盒子拉到中央位置； margin 的百分比并不是相对于自身，而是相对于父元素的宽度，所以这里不能写成 -50% ； 此种实现方式兼容性也同样十分良好。
绝对定位+平移 ? ? 绝对定位声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did254496