2020-12-22

水平垂直布局

内联元素

水平居中

设置父级样式
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;