前段布局垂直水平居中常用方式
发布网友
发布时间：2022-09-14 13:10
共1个回答
热心网友
时间：2024-07-31 02:05
水平居中：水平居中就是为了让子元素在父元素中排列在水平中心位置，实现方式很多，我们看几种常用的。
1. 使用display：inline-block和text-align：center
display:inline-block;
text-align：center;
原理就是将子容器设置为行内块元素，然后给父容器设置让文字居中的属性以达到目的。
缺点就是里面文字都会居中，可单独设置样式来解决。
2. 使用position：absolute和transform
position:absolute;
transform: translateX(-50%);
原理就是先将子容器设置为相对定位，移动左侧距离为相对宽度的一半，这样会使整个容器的左侧在一半的线的位置，看起来靠右了，我们需要再通过向左移动子容器的一半来达到目的。
缺点就是transform属于css3内容，存在浏览器兼容问题。已知宽高时可以将transform换成margin-left设置为负的自身宽度一半达到相同的目的。
4. 使用flex和justify-content
display:flex;
justify-content:center;
原理就是通过css3布局属性flex将子容器转换为flex item情况，然后通过justify-content属性来达到居中。这种方式需要给父容器设置这两种属性。
缺点就是css3属性，有浏览器兼容问题。
垂直居中：垂直居中就是为了让子元素在父元素中排列在垂直中心位置，实现方式很多，我们看几种常用的。
1. 使用display：table-cell和vertical-align
display:table-cell;
vertical-align:middle;
原理就是通过将父容器转换为一个表格单元格来显示，再通过将表格单元格内容垂直居中。
使用时需要将两种属性都设置到父容器身上。
2. 使用position：absolute和transform
position:absolute;
transform: translateY(-50%);
原理类似于水平居中，就是先将子容器设置为相对定位，移动顶部距离为相对高度的一半，这样会使整个容器的顶部在一半的线的位置，看起来靠下了，我们需要再通过向上移动子容器的一半来达到目的。
缺点就是css3属性，有浏览器兼容问题。已知宽高情况时可以将transform换成margin-top设置为负的自身高度一半达到相同的目的。
3. 使用display：flex和align-items
display:flex;
align-items:center;
原理就是通过css3布局属性flex将子容器转换为flex item情况，然后通过align-items属性来达到居中。这种方式需要给父容器设置这两种属性。
缺点就是css3属性，有浏览器兼容问题。
水平垂直同时居中：
关于同时居中有了以上两种方式难道还怕出不来效果吗，只是需要稍稍结合一下即可，比如以下常见结合使用：
1. 使用position:absolute和margin（已知宽高）
position:absolute;
left:50%;
top:50%;
width:100px;
height:100px;
margin-left:-50px;
margin-top:-50px;
2. 使用position:absolute和transform（未知宽高）
position:absolute;
left:50%;
top:50%;
transform: translateX(-50%);
transform: translateY(-50%);
3. 使用position:absolute和margin（未知宽高）
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
4. 使用flex和justify-content和align-items属性（未知宽高）
display:flex;
justify-content:center;
align-items:center;
关于常见居中问题就说几种常用的，其它技巧小伙伴们可自行研究，相信还有很多奇怪的方式也可以达到效果。
