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
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容