关于页面居中布局的方法

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