当前位置：首页 > news >正文

css实现居中的方法

news 来源：原创 2024/9/21 17:52:14

水平居中

1. 行内设置text-align

给父元素设置text-align为center，一般用于实现文字水平居中

2. 给当前元素设置margin：0 auto

原理：块级独占一行，表现为在水平方向上占满整个父容器，当水平方向padding，border，width成定值时，margin左右为auto，默认margin左右平分剩余空间

<head><style>.content{width: 600px;height: 300px;border: 1px solid #000;}.box{width: 200px;height: 200px;background-color: darkcyan;margin: 0 auto;}</style>
</head>
<body><div class="content"><div class="box"></div></div>
</body>

但是当该元素设置了position为absolute时，需要加上left为0，right为0才能使margin：0 auto生效，让元素左右边界都紧贴其包含块的边缘。

.box{width: 200px;height: 200px;background-color: darkcyan;margin: 0 auto;left: 0;right: 0;position: absolute;
}

3. justify-content

父元素设置display为flex布局，justify-content为center，设置盒子在主轴的对齐方式为center

.content{width: 600px;height: 300px;border: 1px solid #000;display: flex;justify-content: center;
}

4. transform + position

父元素设置relative，子元素设置absolute，left为50%，距离左边偏移父元素50%，transform为translateX（-50%），向左平移自身宽度的50%

5. margin-left + position

与transform类似，只是margin-left为负的自身宽度的一半

当未知宽高时用transform，已知宽高可以用margin-left

垂直居中

1. 单行文本可以设置line-height

设置line-height与height相等

一般用于文字垂直居中

2. align-items

父元素设置flex，align-items为center，定义元素在侧轴对齐方式为center

3. transform + position

与水平居中一样，设置top：50%距离上边偏移父元素50%，transform为translateY（-50%）

4. margin-top + position

与水平居中一样，设置top：50%，margin-top：负的自身高度的一半

5. margin：0 auto

子元素设置absolute定位，top为0，bottom为0，margin设置auto

.box{width: 200px;height: 100px;background-color: darkcyan;position: absolute;margin: auto;top: 0;bottom: 0;
}

6. table-cell + vertical-align

给父元素设置display为table-cell，vertical-align为middle

整体居中

行内：text-align:center; line-height:height

块级：

1. flex

.content{width: 400px;height: 300px;border: 1px solid #000;display: flex;justify-content: center; /*水平居中*/align-items: center;  /*垂直居中*/
}

2. transform

.content{width: 400px;height: 300px;border: 1px solid #000;position: relative;
}
.box{width: 200px;height: 100px;background-color: darkcyan;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)
}

3. margin

.content{width: 400px;height: 300px;border: 1px solid #000;position: relative;
}
.box{width: 200px;height: 100px;background-color: darkcyan;position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -100px;
}