12.23C#（水平垂直布局和自动伸缩盒子 box-sizin）

水平垂直布局

内联元素

• 水平居中
  • 设置父级样式
  • text-align:center
• 垂直居中
  • 设置父级样式
  • line-heigh:父级高度

块级元素

• 水平居中
  • 设置自身
  • margin-left:auto
  • margin-right:auto
• 垂直居中
  • 设置自身
  • margin-top:父级的高度的一半
  • transform:translateY(-50%);

行内块

• 水平居中
  • 设置父级
  • text-align:center
• 垂直居中
  • 设置自身
  • margin-top:父级高度的一半
  • transform:translateY(-50%);

浮动元素

• 水平居中
  • 设置自身
  • margin-left:50%
  • transform:translate(-50%,0)
• 垂直居中
  • 设置自身
  • margin-top: 父级高度的一半
  • transform:translate(0,-50%)

定位元素

• 水平居中
  • 设置自身
  • left:50%
  • transform:translate(-50%,0)
• 垂直居中
  • 设置自身
  • top:50%
  • transform:translate(0,-50%)

自动伸缩盒子 box-sizin

用法

指定宽高

添加样式属性和值

box-sizing: border-box;