CSS水平垂直居中方式

标签：color   isp   lex   cal   osi   vertica   line   center   fat   

1.grid布局实现（一）

　　.father{ 

　　display:grid;

　　align-item:center;

　　justify-items:center; }

2.grid布局实现（二）

　　.father{ 

　　display:grid;

　　align-item:center;

　　justify-content:center; }

3.grid配合margin实现

　　.father{ display:grid; }

　　.son{ margin:auto; }

4.flex布局实现

　　.father{

　　display:flex;

　　justify-content:center;

　　align-items:center; }

5.flex配合margin实现

　　.father{ display:flex; }

　　.son{ margin:auto; }

6.使用display:table-cell实现

　　.father{ 

　　display:table-cell;

　　vertical-align:middle;

　　text-align:center; }

　　.son{ display:inline-block; }

7.使用绝对定位实现

　　.father{ position:relative; }

　　.son{ 

　　position:absolute;

　　left:50%;

　　top:50%;

　　transform:translate(-50%,-50%);}

8.通过内联元素的特性实现

　　.father{ text-align:center; }

　　.father::after{ 

　　content:‘‘;

　　line-height:200px; }

　　.son{ display:inline-block; }

　　line-height与father元素height一样

————学习记录

CSS水平垂直居中方式

标签：color   isp   lex   cal   osi   vertica   line   center   fat   

原文地址：https://www.cnblogs.com/atao24/p/13278476.html