HTML5-11(标签水平和垂直居中)

一.所有的标签水平居中

• 1.行内标签 和 行内-块级标签 水平居中

  在父标签中设置text-align: center;

行内标签和行内-块级标签 水平居中

• 2.块级标签设置水平居中

在自身设置  `margin: 0 auto;`

块级标签设置水平居中

二.一.所有的标签垂直居中

• 1.行内标签 和 行内-块级标签 水平居中

  在父标签里面设置 line-height: 200px; ,提示height要和父标签的高度保持一致

行内标签和行内-块级标签水平居中

• 2.块级标签 水平居中

在子标签写入

 line-height: 50px;(和自己的标签保持一致)
 position: absolute;
 left: 50%;top: 50%;
 transform: translate(-50%,-50%);

块级标签 水平居中

三.补充一个知识点

box-sizing: border-box:是为了不改变盒子的尺寸来改变盒子content的大小

box-sizing: border-box