前端布局垂直居中的几种方法
（1）flex布局
HTML代码
<div class="layoutbox"> <div class="layout">我是垂直居中的元素</div> </div>
CSS代码
.layoutbox{display: flex; align-items: center;justify-content:center; height: 500px; border:1px solid #000;} .layout{width:200px;height:200px;border:1px solid #000;}
其中layout中的宽高可以不用设置，不固定宽高
（2）CSS3 transform方法
HTML代码
<body> <div class="layout1">我是CSS3垂直居中的元素</div> </body>
CSS代码
body{background:#a6c1f7;} .layout1{width: 150px;border:1px solid #000;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
（3）两列不定宽flex布局
HTML代码
<div class="widthbox"> <div class="left">我是左边fffff</div> <div class="right">我是右边</div> </div>
CSS代码
.widthbox{display: flex; flex-flow:row nowrap;} .left{background:#c5f5e2;height:300px;} .right{background:#e9f5c5; flex-grow: 1; height:300px;}
