元素水平居中
1.text-align: center;
对父元素设置text-align: center;子元素即可居中。但子元素是有限制的,只对图片,文字等行内元素有效。
2.margin: 0 auto; 元素本身设置 margin: 0 auto; 这种方法对能设置宽度的元素起作用.
3.position:absolute;
父元素:relative,子元素:absolute
4.flex
父元素:display: flex; justify-content: center;
垂直居中
1.一行文字垂直居中
height: 100px; line-height: 100px;
2.flex
父元素:display: flex;align-items: center;
上下左右居中
1.flex
display: flex;align-items: center; justify-content: center;
2.transform
父元素:relative,子元素:absolute
子元素 :top: 50%; left: 50%; transform: translate(-50%,-50%);