块级元素水平垂直居中方法

目录

一.脱离文档流

1.有没有宽高都可以

2.必须要有宽高

二.没有脱离文档流

1.有无宽高都可

2.有宽高

---

一.脱离文档流

只要是脱离文档流,都是使用的是父相子绝(父块相对定位,子块绝对定位),

有三种方式:

有无宽高都可
    1.父相子绝 可以使用 margin:auto
    2.父相子绝 transform:translatex
有宽高
    3.父相子绝 margin-top 一半

1.有没有宽高都可以

下面两种方法都是需要父相子绝(父块相对定位,子块绝对定位),在子块中设置

方法一 margin:auto

    
div2
div3
 
	

方法二 transform:translate:

    
div2
div3
 

2.必须要有宽高

方法一 margin-top margin-left

    
div2
div3
 
		

二.没有脱离文档流

有3种方法

有无宽高都可:
1.(父)
  display:flex;/*将其定义为弹性容器*/
  align-items: center;/*垂直居中对齐*/
  justify-content: center;/*水平居中对齐*/

2.
 (父)display:flex
 (子)margin:auto

有宽高
1.
 (父)display:table-cell;
    vertical-align: middle;(垂直居中)
 (子)margin:0 auto(水平居中)

1.有无宽高都可

方法一:

	
div3
 

方法二:

    
div3
 

2.有宽高

    
div2
div3