定宽高的水平垂直居中

来源：互联网发布：中国云计算大会 2017 编辑：程序博客网时间：2024/05/22 08:19

绝对定位和负magin值

效果预览

<div class="parent">  <div class="child"></div></div>

div.parent {  width: 400px;  height: 400px;  background: #EDEDED;  position: relative;}div.child {  width: 200px;  height: 200px;  background: green;  position: absolute;  left: 50%;  top: 50%;  margin-left: -100px;  margin-top: -100px;}

绝对定位 + left/right/bottom/top + margin

div.parent {  width: 400px;  height: 400px;  background: #EDEDED;  position: relative;}div.child {  width: 200px;  height: 200px;  background: green;  position: absolute;  left: 0;  top: 0;  bottom: 0;  right: 0;  margin: auto;}

flex

这种方法在不定宽高的时候也可以使用，页面结构如上，效果预览

div.parent {  width: 400px;  height: 400px;  background: #EDEDED;  display: flex;  justify-content:center;  align-items: center;              }div.child {  width: 300px;  height: 200px;  background: green;}

绝对定位+transform

这个方法在不定宽高中也使用过，页面结构不变，效果预览

div.parent {  width: 400px;  height: 400px;  background: #EDEDED;  position: relative;       }div.child {  width: 100px;  height: 100px;  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  background: green;}

table-cell + vertical-align + inline-block

先提醒一下，vertical-align的值是middle，而不是center

页面结构不变，效果预览

div.parent {  width: 400px;  height: 400px;  background: #EDEDED;  display: table-cell;  text-align: center;  vertical-align: middle;}div.child {  width: 100px;  height: 100px;  display: inline-block;  background: green;}

阅读全文

0 0