1.行内元素或者内联元素
1.垂直居中
设置行高和高度一致,如果没必要设置高度的话,可以直接利用line-height垂直性,直接设置需要的高度为line-height的高度亦可居中
.center-single-text { height: 100px; line-height: 100px; }
利用内联元素的vertical-align基线参考这一行的其他元素内联元素基线,设置一个伪元素来指定其基线为航中间,设置伪元素高度为100%,然后inline-block,vertical-align: middle
接着设置需要被垂直居中的元素 vertical-align: middle
.ghost-center:before { content: " "; display: inline-block; height: 100%; vertical-algin: middle; } .ghost-center center-element { display: inline-block; vertical-align: middle; }
2.水平居中
/* 在父级元素设置 */ .center-chlidren { text-align: center; }
2.块级元素
1.垂直居中
利用绝对定位将元素左上角移至父元素中心,然后将元素中心移至父元素中心即可。
.parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }
2.水平居中
/* 在居中元素设置 */ .center-me { margin: 0 auto; }
居中神器 flex
无需区分元素类型,一致地行为完成居中,需要注意兼容性
.parent { display: flex; /* 水平居中 */ justify-content: center; /* 垂直居中 */ align-items: center; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。