HTML中元素水平垂直居中的方法

HTML中元素水平垂直居中的方法

水平居中

当元素的display属性是inline 或inline-block （行内元素或行内块元素）的时候，将父元素（容器）设置text-align: center; 就可水平居中。

当元素的display 属性是block （块元素）的时候，将元素本身的margin-left 和 margin-right 设定为 auto，即可水平居中。
例： margin:100px auto;（上边距100px，左右水平居中）

垂直居中

方法一：使用定位

#son {
        position:absolute;
        top:50%;
        left:50%;
        transform:translateX(-50%)translateY(-50%);
}

方法二：使用Flexbox（弹性盒布局）

body {
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
}

注：移动端或不考虑兼容性问题的PC端可使用flex布局

方法三：Display Table

原理：HTML的Table元素有一个valign 的属性是用来设定垂直方向对齐，
将元素的display 属性设定为table ，把它当做一个Table显示。

body {
        display:table;
        width:100%;
        min-height: 100vh;
        margin:0;
}
.cell{
		display:table-cell;	
		vertical-align:middle;
		text-align:center;	
}

注：
方法一是将元素自己定位到画面中间，只需要调整元素自身的属性即可；
方法二和三是先将容器调整到与画面相同的大小，再设定它内容的对齐方式。