关于页面居中布局的方法

最近在给自己梳理一些前端的东西,零零碎碎的总结了一些东西。在页面布局中,居中是最重要的也是基本技能之一。现在总结了一些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;

 


版权声明:本文为xy_peng原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。