水平居中:
-
对于行内元素:text-align:center;
-
对于确定宽度的块级元素:
1.width加margin实现,width固定宽度,margin: 0 auto;
2.绝对定位和margin-left:width/2,前提是父元素position:relative; -
对于宽度未知的块级元素:
1.table标签配合margin左右auto实现水平居中。使用table标签(或直接将块级元素设置为display:table;)
再给该标签加magin:0 auto;
2.inline-block实现水平居中方式:display:inline-block和text-algin:center;实现水平居中。
3.绝对定位+transform,translateX可以移动元素50%。
4.H5堆出的布局方式:flex布局(justify-content:center;)。
垂直居中:
- 设置line-height等于元素高度实现居中。
- 设置父元素相对定位,子元素绝对定位加子元素margin:auto 0;实现。
- 弹性布局flex:父级元素display:flex;子级元素margin:auto 0;实现。
- 设置父元素相对定位,子元素绝对定位加子元素位移transform实现。
- table布局,父级元素通过转换成表格形式,然后设置子级元素vertical-align:middle;实现。(注意:vertical-align:middle使用前提条件是内联元素以及display值为table-cell元素)