HTML+CSS面试题-用Flex写一个垂直水平居中示例？三栏布局如何实现？

垂直水平居中实例

Html代码

<div id="box">
  <div class="item">1div>
  <div class="item">2div>
  <div class="item">3div>
  <div class="item">4div>
  <div class="item">5div>
div>

样式

#box{
  display: flex;
  border: 1px solid #0000FF;
  height: 200px;
  width: 400px;
  align-items:center;
  justify-content:center;
}
.item{
  width: 50px;
  height: 40px;
  border: 1px solid #00C1B3;
}

直接就是外面包裹的容器设置为弹性布局，

display：flex；

justify-content:center 主轴居中对齐

Align-items:center 侧周居中对齐

里面的子元素设置宽高即可

三栏布局

实现方式：

圣杯布局、双飞翼布局、浮动、绝对定位、flex 布局、表格布局、网格布局。