css居中布局,不同的布局用来对应不同的场景

1.Grid

先在父元素上设置grid布局 

display: grid;

grid: var(–居中);

指定子元素在中心位置 

grid-area: 中;

给子元素设置宽高,

width: 150px;

height: 150px;

2.绝对定位实现

先在父元素上设置相对定位 

position: relative 

给子元素 绝对定位 

position: absolute; 

上下左右全部为0 

top: 0; right: 0; bottom: 0; left: 0; 

给定宽高  

width: 70%; height: 25%; 

令外边距自动填充

margin: auto;

3.绝对定位 + 负边距

先在父元素上设置相对定位 

position: relative 


给子元素绝对定位 

position: absolute;

 上方和左方为50% 

top: 50%; left: 50%;

 给定宽高 

 width: 300px; height: 200px; 

上外边距为负的给定高度的一半 

 margin-top: -100px; 

左外边距为负的给定宽度的一半 

 margin-left: -150px;

4.绝对定位 + 平移

先在父元素上设置相对定位  

position: relative 

 给子元素绝对定位 

position: absolute;

上方和左方为50% 

top: 50%; left: 50%;

不用给宽高,但是可以给个内边距防止内容与盒子过于贴合 

padding: 10px;

这个50%是相对于自身宽高而言的 

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

5.网格 Grid 实现

令其父元素变成网格布局 

display: grid;

令其子元素居中 

place-items: center;

6.Flex 弹性盒子

父元素 令其变成弹性布局 

display: flex;


令其子元素自动外边距 

 margin: auto;

7.表格布局

父元素上

display: table-cell;

text-align: center;

vertical-align: center;


子元素上设置

display: inline-block;

Vue组件通信方式居然有这么多?你了解几种
« 上一篇 2020年10月29日 上午12:00
!DOCTYPE —— HTML文档模式
下一篇 » 2020年10月29日 上午12:00