绝对定位实现居中布局
1. 前言
居中布局通常分为两种，一种是固定宽高，另一种是非固定宽高。
固定宽高很好理解，非固定宽高通常都是靠里面的 内容 来撑起盒子的高度， 内容 时多时少。
这两种方式也造就了不一样的技术实现，我们来看一下。
2. 实例 代码
假如我们有 一个 宽度占 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 : ;
b ott om : ;
left : ;
/* 给定宽高 */
width : ;
height : ;
/* 令外边距 自动 填充 */
margin : auto ;
/* 白色背景 */
background : white ;
}
</ style >
</ head >
< body >
< div class = " center " > </ div >
</ body >
</ html >
运行结果：
代码 说明：
如果不给定宽高，盒子将会和父元素一样大，因为绝对定位上下左右都是 0，意为紧贴着父元素的边。 给了固定宽高，但没写 margin 的话盒子会固定在 左上角 ，因为 top 和 left 的优先级更高。 给了 margin: auto; 的话，浏览器会 自动 填充边距，令其居中。 此种实现方式优点是兼容性很好，几乎没用到任何 CSS 的新特性，全部都是经典 属性 。
3. 小结
学会了绝对定位来进行居中之后，下一小节我们再来看一下绝对定位怎么和外边距进行搭配。
绝对定位+负边距 ? ? 中文布局 CSS 库声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did254495