水平垂直布局
内联元素
-
水平居中
- 设置父级样式
- 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;