CSS居中对齐、定位的总结

1.css水平，垂直居中的写法

(1)水平居中

行内元素

text-align:center

块级元素

margin:auto

(2)垂直居中

当height和line-height:height两个属性设置相同高度时，该元素内部文字会居中。

line-height:height;

padding：将顶部和底部设置同样的高度，也会居中

padding-top:20px;
padding-bottom:20px;

margin：让div居中对齐

margin-left: auto;
margin-right: auto;

除了使用line-height和padding、margin外，我们还可以使用 transform 属性来设置垂直居中

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

2.position定位

position 属性指定了元素的定位类型。
共有以下五种，常用的是(1),(2),(3)

(1)relative定位，相对定位元素的定位是相对其正常位置。

position:relative;

(2)absolute定位，绝对定位的元素的位置相对于最近的已定位父元素

position:absolute;

(3)fixed 定位，元素的位置相对于浏览器窗口是固定位置。

position:fixed;

(4)sticky 定位，可以把它称之为粘性定位

position: sticky;

(5)static定位，静态定位的元素不会受到 top, bottom, left, right影响

position: static;