|
1、水平居中
1.1 要居中的是内联元素或行内-块级元素？（例如文字或链接）
块级父元素设置text-align为center则其内内联元素水平居中。This will work for inline, inline-block, inline-table, inline-flex, etc.
1.2 要居中的是块级元素？
设定了宽度的块级元素（不设定宽度将会自动铺满那就不必须水平居中啦）：把该元素的margin-left和 margin-right 都设置成auto来实现水平居中。
1.3 一行内不止一个块级元素？
1.3.1 倘若在一行内有两个或多个块级元素必须水平居中，得为它们设置区别的display类型。/* 办法1-将这些块级元素设置display为inline-block，再将其父容器设置text-align为center*/ /* 办法2-直接给父容器设置成flex布局，再将justify-content属性设置成center*/ 1.3.2 倘若是多个块级元素依次堆在上一个的顶部，那margin auto策略还是奏效的。
2、垂直居中
2.1 要居中的是内联元素或行内-块级元素？（例如文字或链接）
2.1.1 是单行？
2.1.1.1单行的内联元素只需将上下padding设置成等值就能够实现垂直居中。
2.1.1.2 在某些不可运用padding的状况下，并确定是不换行的文本，则能够使用line-height等于height的办法来使单行文本内容垂直居中。
2.1.2 是多行？ 2.1.2.1 给多行文本设置上下等大的padding亦能够使其垂直居中。但倘若此法不奏效，则有可能是文字在的元素成为了table cell，此时候就要用vertical-align
来处理问题。
2.1.2.2 倘若table-like已然过时不消了，用flexbox是更佳方法。一个flex-child能够很容易在flex-parent里实现居中（父容器必要有个固定高度px、%等）。
2.1.2.3 除去以上两种办法，你还能够运用幽灵元素技巧"ghost element" technique，在这种技术中，容器内安置一个完全高度的伪元素，并且文本与此垂直对齐。
2.2 要居中的是块级元素？
2.2.1 该块级元素高度已知
你知道晓得元素的高度，则能够像下面这般来垂直居中：/* 元素相对其父容器顶部50%的位置 */ / * 元素的margin-top设置为负(自己height*0.5)*/
2.2.2 该块级元素高度未知
相对父容器顶部50%定位，再纵向回移自己高度的50%即tramsform: translateY(-50%)，就可实现垂直居中。
2.2.3 是不是介意该元素撑开其父容器高度？ 倘若不介意，那只需运用tables或CSS display使元素变成tables再使vertical-align
为middle就能实现垂直居中。
2.2.4 你要用flexbox吗？
运用flex布局能够很容易实现垂直居中：align-items: center; 或经过flex-direction: column;将默认横向的主轴改为垂直方向，起点在上沿。并justify-content: center;亦能够。
3、垂直水平居中
3.1 该元素的宽高固定吗？
在将元素绝对定位为top: 50%; left: 50%;后，能够运用值为宽的一半和高的一半的负margin实现垂直水平居中。（跨浏览器支持很不错）
3.2 该元素宽高未知？
（1）倘若宽高未知，在将元素绝对定位为top: 50%; left: 50%;后，能够使用transform属性来做负的50%移动（基于当前元素宽高）。
（2）亦能够元素相对父容器绝对定位(left: 0;right: 0;top: 0;bottom: 0;)并margin: auto，不必须提前晓得尺寸兼容性好。
3.3 你要用flexbox吗？ 对flexbox进行垂直水平居中
| 
发表于 2024-6-30 09:38:04
楼主