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;
}
注:
方法一是将元素自己定位到画面中间,只需要调整元素自身的属性即可;
方法二和三是先将容器调整到与画面相同的大小,再设定它内容的对齐方式。