關于居中對齊,之前有記錄了絕對定位、display:inline-block、margin-top和table-cell的幾種對齊方式,還可以用絕對定位和transform,如下圖:
這個是不需要固定的寬度和高度,設置translate成50%就可以了,它的偏移是根據元素的寬高的50%。
如果只是需要移動端使用,用flex布局也很不錯,如下圖:
不過應用于PC端就要考慮兼容性的問題了。
記了這么一些關于垂直居中的,關于水平居中,行內元素例如span的要設置水平居中,需要在它的父元素設置text-align:center;
塊狀元素需要劃分是確定寬度和不確定寬度;確定寬度的塊狀元素需要設置margin:0auto;margin的上下可以按自己需求設置。不確定寬度的塊狀元素,例如p,可以用table,把p放進table的td里面,將table設置margin:0auto;
或者采用另一方法,將不確定寬度的塊狀元素p設置display:inline;改變類型,然后它的父級元素設置text-align:center;用來實現想要的效果。