html常用的几种居中方法

前言

本篇文章主要介绍如何使用 html+css 实现元素的的水平与垂直的居中效果，这是我们在网页编码过程中经常遇到的问题。

布局分类

一、水平居中布局

效果图：

1.inline-block+text-align

利用 display:inlin-block 将元素设置为具有文本元素的性质，然后利用文本对齐属性 text-align 来设置对齐方式，center 即为水平对齐

2.定位 + transform

父元素开启定位，子元素设置绝对定位，left 设置为 50%，再使用 transform: translateX(-50%)将子元素往反方向移动自身宽度的 50%，便完成水平居中。

3.display:block + margin:0 auto

通过对子元素设置便可以实现水平居中，设置 margin 为 auto 表示浏览器自动分配，实现外边距等分

二、垂直居中布局

效果图：

1.定位+transform
与水平居中第二种方法相同的原理，利用 top 为 50%，再设置 transform：translateY(-50%),既可以实现垂直居中

2.display:table-cell + vertical-align

通过设置 display：table-cell 使元素具有 td 元素的行为，使得子元素具有类似文本元素的布局方式，然后在父元素中设置 vertical-align:middle,实现元素的垂直居中

三、水平垂直居中布局

效果图：

1.定位+transform
父元素开启定位，子元素设置绝对定位，left 设置为 50%，top 设置为 50%，再使用 transform: translate(-50%，-50%)将子元素往反方向移动自身宽度的 50%，便完成水平垂直居中。

2.结合水平布局 3，垂直布局 2

3.flex 布局
使用 flex 布局，align-items:center 垂直居中 ，justify-content:center 水平居中

结尾

这里仅仅是介绍几种常用的方法，并不是全部，布局方法太多了，还需要慢慢摸索