面试常问：水平居中和垂直居中的方法

最新推荐文章于 2024-07-06 14:50:23 发布

霖霏晗

最新推荐文章于 2024-07-06 14:50:23 发布

阅读量497

点赞数

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/xxz_best/article/details/132426759

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

水平居中

文本居中
- 如果元素为行内元素，可以将父元素的text-align属性设置为center，这样子元素就会水平居中对齐

.text{
  text-align: center;
}

固定宽度的居中
- 如果元素宽度已知并固定，可以通过将左右margin设置为auto来实现水平居中。

.content{
	margin-left:auto;
	margin-right:auto;
}

绝对定位和移动
- 可以使用绝对定位和transform来实现水平居中。首先将元素的左边距和右边距都设置为auto，然后使用transform属性将元素向左平移50%。

.content{
	position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Flexbox布局

.content{
	display: flex;
    justify-content: center;
}

表格布局
- 将父元素的display属性设置为table-cell，并将text-align属性设置为center。

.content{
  display: table-cell;
  text-align: center;
}

垂直居中

表格布局
- 将父元素的display属性设置为table，并将子元素的display属性设置为table-cell，然后使用vertical-align属性将子元素垂直居中
- 未知高度的块级父子元素居中，模拟表格布局
- 缺点：IE67不兼容，父级 overflow：hidden 失效

.parentcont {
  display: table;
}
.childCont {
  display: table-cell;
  vertical-align: middle;
}

Flex布局
- 将父元素的display属性设置为flex，并使用align-items属性将子元素垂直居中。

.pacon {
  display: flex;
  align-items: center;
}

绝对定位和负边距
- 已知高度的子元素，将父元素设置为相对定位，子元素设置为绝对定位，并使用top: 50%将其垂直居中，然后通过负边距的方式将子元素向上移动一半的高度

.parentCon{
  position: relative;
}
.childCon {
  position: absolute;
  top: 50%;
  margin-top: -`100px; /* 假设子元素高度为200px的一半 */
}

文本垂直居中
- 对于单行文本，可以设置父元素的line-height属性和高度相等，从而实现文本的垂直居中

.con{
  height: 50px;
  line-height: 50px;
}

CSS3位移
- 使用CSS3的transform属性的translateY函数将子元素向上位移一半的高度实现垂直居中

.con {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

inline-block兄弟元素
- 通过在父元素中插入一个inline-block元素，并设置其垂直对齐方式为middle来实现垂直居中

.parentCon {
  	height: 100%;
}
.extracon {
  	display: inline-block;
 	vertical-align: middle;
}
.childcon {
  	 display: inline-block;
 	 vertical-align: middle;
}