水平居中
一、如果是行内元素,则设置
text-align: center;
二、如果是块级元素或者行内块级元素
则有以下几种:
- 子元素设置margin: 0 auto;
margin: 0 auto;
- 父元素设置flex 和 justify-content
display: flex;
justify-content: center;
- 父元素相对定位,子元素绝对定位
/* 父元素 */
position: relative;
/* 子元素 */
position: absolute;
left: 50%;
transform: translateX(-50%);
/* 或者 */
margin-left: -50%;
/* 或者 */
left: 0;
rigth: 0;
margin: 0 auto;
- 盒模型
/* 父元素 */
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
垂直居中
一、 如果是单行文本则设置light-height等于元素的高度
二、如果是行内块级元素或者块级元素
- flex布局
display: flex;
align-items: center;
- 定位
/* 父元素相对定位 */
position: relative;
/* 子元素 */
position: absolute;
top: 50%;
margin-top: -50%;
/* 或 */
transform: translateY(-50%);
/* 或 */
top:0;
bottom:0;
margin:auto 0;
- 盒模型
display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-box-pack: center;
- calc 动态计算
父元素随意
/*子元素*/
width: 100px;
height:100px;
position: relative;
/* 距离顶部的百分比 - 子元素自身高度的一半*/
top: calc(50% - 50px);
margin: auto;
- 元素高度不固定时
/* 父元素 */
display: table;
/* 子元素 */
dispaly: table-cell
vertical-align: center;
网友评论