【前端学习笔记】08-文字与盒子的水平垂直居中

css布局

布局实战 - 文字垂直+⽔平居中

单行文字水平垂直居中

.container {
    width: 500px;
    border: 5px solid #ccc;
    height: 100px;
  }

.container {
    width: 500px;
    border: 5px solid #ccc;
    height: 100px;
  }
  .container {
    line-height: 100px;
    text-align: center;
  }

布局实战 - 盒子水平居中

margin:0 auto 设置对象上下间距为0，左右自动。
可拆分： margin:0 auto 0 auto（上下）;
还可拆分为:margin-left:auto;margin-right:auto;margin-top:0;marg-inbottom:0;

布局实战 - 盒子水平垂直居中

利用绝对定位和margin负值

.box {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
    background-color: #1677ff;
  }

缺点：需要知道子元素的具体大小