首页 > Web开发 > 详细

css的垂直居中与水平居中

时间:2020-06-06 21:56:12      阅读:69      评论:0      收藏:0      [点我收藏+]

css的垂直居中与水平居中

一、 块级盒子水平居中

  1. width 必须有宽度
  2. 盒子的左右外边距 auto
width: 100px;
height: 100px;
margin: 0 auto;

二、 行盒/行块盒/文字水平居中

只需要在父级元素使用 text-align: center; 即可

三、 文字垂直居中

包裹文字的盒子设置行高等于盒子高度,这样行高的上空隙和下空隙就会把文字内容挤到中间
如果行高小于盒子高度,文字会偏上,行高大于盒子高度,文字会偏下

height: 50px;
line-height: 50px;

四、绝对定位的盒子居中

加了绝对定位的盒子不能通过 margin:0 auto实现水平居中,但可以通过以下计算方式实现水平和垂直居中

1. 绝对定位的盒子水平居中

  • 让盒子的左侧移动到父级元素的水平中心位置
  • 让盒子向左移动自身宽度的一半
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            /*让盒子的左侧移动到父级元素的水平中心位置*/
            left: 50%;
            /*1. 使用margin-left: -50px;需要自己计算出盒子自身宽度的一半,如果盒子宽度改变了,这里也要改*/
            /*margin-left: -50px;*/
            /*2. transform: translateX(-50%);过渡,自动计算自身盒子的一半宽度*/
            transform: translateX(-50%);

2. 绝对定位的盒子垂直居中

  • 让盒子的上侧移动到父级元素的水平中心位置
  • 让盒子向上移动自身宽度的一半
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            /*让盒子的上侧移动到父级元素的垂直中心位置*/
            top: 50%;
            /*1. 使用margin-top: -50px;需要自己计算出盒子自身高度的一半,如果盒子高度改变了,这里也要改*/
            /*margin-top: -50px;*/
            /*2. transform: translateY(-50%);过渡,自动计算自身盒子的一半高度*/
            transform: translateY(-50%);

css的垂直居中与水平居中

原文:https://www.cnblogs.com/yloved/p/13056612.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!