最近在给自己梳理一些前端的东西,零零碎碎的总结了一些东西。在页面布局中,居中是最重要的也是基本技能之一。现在总结了一些css 的居中方法:
1、水平居中的方式:
在对有display:inline的父标签,添加样式,则标签内的子元素居中
display:inline-block;
text-align:center;
在对display:table或flex的标签内的子元素居中;则有样式
display:table/flex;
margin:0 auto;
使用position绝对定位的居中有方式
父元素:position:relative
子元素:position:absolute;
left:50%;
transform:translateX(-50%);
使用flex 盒子的弹性布局
display:flex;
flex-direction:row;
jusity-content:center;
2、垂直居中的方法有:
在对display:table或flex的标签内的子元素居中;则有样式
display:table/flex;
margin:auto 0;
使用 vertical-align:middle;居中
dispaly:tabel-cell;
vertical-align:middle;
使用绝对定位的垂直居中
父元素:position:relative
子元素:position:absolute;
top:50%;
transform:translateY(-50%);
使用flex弹性垂直居中
display:flex;
flex-direction:column;
align-items:center
3、页面中央居中的方式:
将上面的1、2两种合并起来的的居中方式
display:flex;
jusity-content:center;
align-items:center
父元素:position:relative
子元素:position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
display:table/flex;
margin:auto;