css|CSS两栏布局的实现和水平垂直居中的实现 html|css3

一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现：

利用浮动，将左边元素宽度设置为 200px，并且设置向左浮动。将右边元素的 margin-left 设置为 200px，宽度设置为 auto（默认为 auto，撑满整个父元素）。

.outer { height: 100px; } .left { float: left; width: 200px; background: tomato; } .right { margin-left: 200px; width: auto; background: gold; }

利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置 overflow: hidden; 这样右边就触发了 BFC，BFC 的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。

.left{ width: 100px; height: 200px; background: red; float: left; } .right{ height: 300px; background: blue; overflow: hidden; }

利用 flex 布局，将左边元素设置为固定宽度 200px，将右边的元素设置为 flex:1。

.outer { display: flex; height: 100px; } .left { width: 200px; background: tomato; } .right { flex: 1; background: gold; }

利用绝对定位，将父级元素设置为相对定位。左边元素设置为 absolute 定位，并且宽度设置为 200px。将右边元素的 margin-left 的值设置为 200px。

.outer { position: relative; height: 100px; } .left { position: absolute; width: 200px; height: 100px; background: tomato; } .right { margin-left: 200px; background: gold; }

利用绝对定位，将父级元素设置为相对定位。左边元素宽度设置为 200px，右边元素设置为绝对定位，左边定位为 200px，其余方向定位为 0。

.outer { position: relative; height: 100px; } .left { width: 200px; background: tomato; } .right { position: absolute; top: 0; right: 0; bottom: 0; left: 200px; background: gold; }

【css|CSS两栏布局的实现和水平垂直居中的实现】水平垂直居中的实现:

利用绝对定位，先将元素的左上角通过 top:50%和 left:50%定位到页面的中心，然后再通过 translate 来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。

.parent { position: relative; }.child { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }

利用绝对定位，设置四个方向的值都为 0，并将 margin 设置为 auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况：

.parent { position: relative; }.child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

利用绝对定位，先将元素的左上角通过 top:50%和 left:50%定位到页面的中心，然后再通过 margin 负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况

.parent { position: relative; }.child { position: absolute; top: 50%; left: 50%; margin-top: -50px; /* 自身 height 的一半 */ margin-left: -50px; /* 自身 width 的一半 */ }