已复制
全屏展示
复制代码

HTML CSS 浏览器元素居中显示


· 2 min read

作为后端程序员,假如只是偶尔使用一下html,布局什么的忘记的很快,这里总结了在 HTML 和 CSS 中实现居中显示元素的几种方法,包括了水平居中、垂直居中、水平垂直居中。通常针对不同的元素类型,选择合适的居中方式。

水平居中

a. 使用text-align: center;(适用于行内元素):

<div style="text-align: center;">
  <p>This is a centered text.</p>
</div>

b. 使用margin: 0 auto;(适用于块级元素):

<div style="width: 200px; margin: 0 auto;">
  <p>This is a centered block with a fixed width.</p>
</div>

c. 使用Flexbox(适用于容器内的子元素):

<div style="display: flex; justify-content: center;">
  <p>This is a centered text using Flexbox.</p>
</div>

d. 使用Grid(适用于容器内的子元素):

<div style="display: grid; place-items: center;">
  <p>This is a centered text using Grid.</p>
</div>

垂直居中

a. 使用Flexbox(适用于容器内的子元素):

<div style="background:red; display: flex; align-items: center; height: 200px;">
  <p>This is a vertically centered text using Flexbox.</p>
</div>


b. 使用Grid(适用于容器内的子元素):

<div style="background:red; display: grid; place-items: center; height: 200px;">
    <p>This is a vertically centered text using Grid.</p>
</div>

c. 使用绝对定位(适用于已知高度的元素):

<div style="background:red; position: relative; height: 200px;">
    <p style="position: absolute; top: 50%; transform: translateY(-50%);">This is a vertically centered text using absolute positioning.</p>
</div>

水平垂直居中

a. 使用Flexbox:

<div style="background: red; display: flex; justify-content: center; align-items: center; height: 200px;">
  <p>This is a horizontally and vertically centered text using Flexbox.</p>
</div>

b. 使用Grid:

<div style="background: red; display: grid; place-items: center; height: 200px;">
  <p>This is a horizontally and vertically centered text using Grid.</p>
</div>

c. 使用绝对定位和transform:

<div style="background: red; position: relative; height: 200px;">
  <p style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">This is a horizontally and vertically centered text using absolute positioning and transform.</p>
</div>
🔗

文章推荐