CSS中利用flex实现水平垂直居中

CSS中利用利用flex实现水平垂直居中
 
基本结构样式:
 
.box {
  width: 400px;
  height: 400px;
  background-color: red;
}
 
.inner {
  width: 100px;
  height: 100px;
  background-color: blue;
}
<div class=”box”>
  <div class=”inner”></div>
</div>
 
1.利用flex布局
将父元素启动flex布局,并设置justify-content: center; align-items: center;。
 
添加样式:
 
.box {
  display: flex;
  justify-content: center;
  align-items: center;
}
2.利用flex+margin
父元素设置display: flex;,子元素设置margin: auto;。
 
添加样式:
 
.box { display: flex; }
.inner { margin: auto; }

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64648.shtml

张贴在3