关于页面居中布局的方法

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

你可能感兴趣的