如何用CSS实现网页元素的水平垂直居中效果？

2026-04-11 11:091阅读0评论SEO教程

内容介绍
文章标签
相关推荐

本文共计1111个文字，预计阅读时间需要5分钟。

目录 + 行内元素水平居中 + text-align: center; + fit-content; 行内元素和行内块元素垂直居中 + 块级元素水平居中 + 块级元素垂直居中 + 定位方法 + 方法一：必须知道宽高 + 方法二：不必知道宽高

行内元素水平居中
- text-align: center;
- fit-content
行内元素和行内块元素垂直居中
块级元素水平居中
块级元素水平垂直居中
- 定位方法
  - 方法一：必须知道宽高
  - 方法二：不必知道宽高
  - 方法三：margin配合定位
  - padding 方法
    - 方法一：给父元素加 padding
    - 方法二：给子元素加 padding
  - flex 布局方法
  - 伪元素方法

行内元素水平居中 text-align: center;

<style> .parent { background-color: aliceblue; text-align: center; } .child { background-color: orange; } </style> <body> <div class="parent"> <span class="child">content</span> </div> </body> content fit-content

<style> .parent { background-color: aliceblue; width: fit-content; margin: auto; } .child { background-color: orange; } </style> <body> <div class="parent"> <span class="child">content</span> </div> </body> content 行内元素和行内块元素垂直居中

<style> .parent { height: 200px; line-height: 200px; background-color: aliceblue; } .child { background-color: orange; } </style> <body> <div class="parent"> <span class="child">content</span> </div> </body> content 块级元素水平居中

<style> .parent { height: 200px; width: 200px; background-color: aliceblue; } .child { height: 100px; width: 200px; background-color: orange; } </style> <body> <div class="parent"> <div class="child">content</div> </div> </body> content 块级元素水平垂直居中定位方法方法一：必须知道宽高

<style> .parent { position: relative; height: 100px; background-color: aliceblue; } .child { width: 100px; height: 50px; position: absolute; background-color: orange; left: 50%; top: 50%; margin-top: -25px; margin-left: -50px; } </style> <body> <div class="parent"> <div class="child">content</div> </div> </body> content 方法二：不必知道宽高

<style> .parent { position: relative; height: 100px; background-color: aliceblue; } .child { position: absolute; background-color: orange; left: 50%; top: 50%; transform: translate(-50%, -50%); } </style> <body> <div class="parent"> <div class="child">content</div> </div> </body> content 方法三：margin配合定位

当我们给子元素绝对定位后，当我们给各边界距离都为0后，子元素就会填充父元素的所有可用空间，这样一来，在水平和垂直方向上就有了可以分配的空间，这时设置margin: auto;就可以自动居中。

<style> .parent { position: relative; height: 100px; background-color: aliceblue; } .child { position: absolute; background-color: orange; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } </style> <body> <div class="parent"> <div class="child">content</div> </div> </body> content padding 方法方法一：给父元素加 padding

<style> .parent { background-color: aliceblue; padding: 20px; } .child { height: 100px; background-color: orange; } </style> <body> <div class="parent"> <div class="child">content</div> </div> </body> content 方法二：给子元素加 padding

<style> .parent { background-color: aliceblue; width: 200px; height: 100px; } .child { width: 100px; height: 50px; background-color: orange; padding: 25px 50px; background-clip: content-box; } </style> <body> <div class="parent"> <div class="child">content</div> </div> </body> content flex 布局方法

justify-content: center;控制水平居中

align-items: center;控制垂直居中

<style> .parent { height: 200px; background-color: aliceblue; display: flex; align-items: center; justify-content: center; } .child { height: 50px; width: 100px; background-color: orange; } </style> <body> <div class="parent"> <div class="child">content</div> </div> </body> content 伪元素方法

<style> .parent { height: 100px; text-align: center; background-color: aliceblue; } .child { height: 50px; width: 100px; display: inline-block; background-color: orange; vertical-align: center; } .parent::before { content: ""; height: 100px; display: inline-block; vertical-align: middle; background-color: yellow; } </style> <body> <div class="parent"> <div class="child">content</div> </div> </body> content

为了方便观察，这里效果中给模拟的伪元素增加了5px的宽度，实际不用给伪元素设置宽度。

标签：方法总结目录行内