Ericnth的小站

  • 方法一:使用定位属性+transform
  • 方法二:使用flex
  • 如果只要水平居中
  • 你可能还想了解...
  • 首页
  • 编程学习笔记
  • 系统与软件
  • 摄影
  • 随笔
  • 论坛
  • 公告

CSS两种方法实现水平垂直居中

  • Tianheng Ni
  • 2021-02-19
  • 0

方法一:使用定位属性+transform

本方法通用,方便,推荐使用。

给您要水平垂直居中的元素添加以下css属性:

position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);

给body添加相对定位属性:

position: relative;

即可实现。本站登录页面既是使用本方法实现的。

若要更改位置,直接改translateX和translateY的属性值即可。

方法二:使用flex

本方法更加方便,但是有时候会出bug。

给您要水平垂直居中的元素添加以下css代码即可:

display: flex;
justify-content: center;
align-items: center;

但是要调相对位置就比较麻烦了。

如果只要水平居中

更加简单,通过一个小技巧即可实现:

margin: 0 auto;

如果是文字,推荐直接使用:

text-align: center;

你可能还想了解...

  • 本站pagespeed 100分祭+三本react电子书赠送
  • WCAG是什么
  • wordpress无损搬家方法概述
  • 关于HTTP Status Code
  • 来自Google的神器: ngx_pagespeed
© 2023 Ericnth的小站
Theme by Wing
沪ICP备2020025694号 沪公网安备31011202012861号
  • {{ item.name }}
  • {{ item.name }}