水平垂直布局
内联元素
水平居中
设置父级样式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;
12
最新推荐文章于 2022-07-16 16:48:09 发布