CSS实现水平居中和垂直居中

最新推荐文章于 2025-07-02 15:54:47 发布

原创最新推荐文章于 2025-07-02 15:54:47 发布 · 455 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#水平居中 #垂直居中 #css

CSS/CSS3 专栏收录该内容

5 篇文章

订阅专栏

本文介绍网页设计中常见的水平和垂直居中方法，包括使用CSS3的transform属性、flex布局及绝对定位等技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	在写网页时经常要做到对齐以及居中等，下面就来浅谈水平居中以及垂直居中。

水平居中

text-align:center实现行内元素水平居中。
margin:0 auto实现块元素水平居中。
使用CSS3中新增的transform属性。

.parent{
	position:relative;
	}
.son{
      position:absolute;
      left:50%;
      transform:translate(-50%,0);
}

使用flex 布局

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

5.使用绝对定位方式, 以及负值的margin-left,margin-left是width的一半。

.parent{
	position:relative;
	}
.son{
    position:absolute;
    width:100px;
    left:50%;
    margin-left:-50px;
}

6.使用绝对定位方式, 以及left:0;right:0;margin:0 auto;

.parent{
	position:relative;
	}
.son{
    position:absolute;
    width:100px;
    left:0;
    right:0;
    margin:0 auto;
}

垂直居中

设置 line-height 等于父元素高度

.box{ height:20px;line-height :20px}

2.使用flex 布局

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

3.可用 transform

.parent{
	position:relative;
.son{
    position:absolute;
    top:50%;
    transform: translate(-50%,-50%);
}

4.使用绝对定位方式, 以及负值的margin-top,margin-top是width的一半

.parent{
	position:relative;
	}
.son{
    position:absolute;
   height:100px;
    top:50%;
    margin-top:-50px;
}

5.使用绝对定位方式, 以及left:0;right:0;margin:0 auto;

.parent{
	position:relative;
	}
.son{
    position:absolute;
   height:100px;
    left:0;
    right:0;
    margin:0 auto;
}

6.若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央.

.parent::after, .son{
    display:inline-block;
    vertical-align:middle;
}
.parent::after{
    content:'';
    height:100%;
}

7.元素高度不定时，可用 vertical-align 属性, 而vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle;

参考文章