常用CSS样式属性( 四 ) _生活百科

margin: 0 auto; 边距填充让块元素水平居中对齐，设置左右外边距自动分配position定位+位置计算=居中绝对定位absolute：需要计算自身宽度left: 50%; margin-left: -100px; 相对定位relative + 变换移动：left: 50%; transform: translateX(-50%);flex布局的 justify-content 水平居中让flex容器内的元素水平居中：justify-content: center;

注意：变换函数 translateX(50%)的参数50%是相对于自身尺寸，而不是父元素，这里和其他百分比%的计算不同！

/* 水平居中：块元素左右margin均分 */p {width: max-content; margin: 0 auto;}/* 水平居中：绝对定位 */.hcenter {width: 100px;position: absolute;left: 50%;margin-left: -50px;}/* 水平居中齐：flex布局，居中排列flex项 */.fhcenter {display: flex;justify-content: center;justify-content: space-around; /* 两端对齐 */}

2.2、垂直居中（4）

文章插图
方法描述/示例单行内容：line-height = 行高设置行高等于元素高度，一般用于单行的文本内容、行内元素。flex布局的 align-items 垂直居中让flex容器内的元素垂直居中 align-items: center; 在flex布局模式下，子元素用margin也可以居中：margin: auto 0;vertical-align : middle 互相居中vertical-align属性可用于指定行内元素（inline）、表格的单元格（table-cell）的垂直对齐方式。常用于图片、表格、文本、表单的互相居中对齐，?注意是互相对齐，不是基于父元素。- 直接使用vertical-align: middle;，可以让行内元素相互居中对齐。- 配合line-height使用，让子元素基于父元素垂直居中- 配合display: table-cell;使用，让任何元素都可以垂直居中，包括块元素- 利用伪元素::before 让行内元素居中position定位+位置计算=居中基本使用和上面水平居中的定位技术类似，相对定位，然后计算top距离- position: relative; top:calc(50% - 10px);，需计算元素具体高度。- position: relative; top: 50%; transform: translateY(-50%);

/* 垂直对齐：flex布局，居中排列flex项 */.fvcenter{height: 100px; background-color: antiquewhite;display: flex;align-items: center;}/* 垂直对齐：vertical-align 结合行高 line-height */.vcenter{background-color: antiquewhite;height: 100px;line-height: 100px;}.vcenter *{vertical-align: middle;}/* 垂直对齐：vertical-align 结合行高 table-cell 布局 */.vcenter{background-color: antiquewhite;height: 100px;display: table-cell;vertical-align: middle;}.vcenter *{vertical-align: middle;}/* 垂直居中：给行内元素添加伪元素，让伪元素垂直居中 */.vmid::before{content: "";display: inline-block;height: 100%;vertical-align: middle;}

03、overflow溢出怎么办？溢出指的是内容超出父元素的区域。
属性描述overflow溢出方式，元素内容超出盒子大小的处理方式，是overflow-x 和overflow-y的简写属性?visible默认值，都会显示出来，会遮盖了后面的内容。?hidden不显示超过对象尺寸的内容，超过部分隐藏?scrollwin系统始终显示滚动条，Mac系统和 auto相同?auto自动处理，如果内容超出会显示滚动条3.1、文本溢出需要多个属性配合使用。
方法描述/示例单行文本溢出，显示省略号...text-overflow 需配合overflow、white-space