关于页面居中布局的方法

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