CSS元素居中的方式

一、文本上下左右居中的方式：
1、给元素添加text-align:center,使元素水平居中。
我们给容器设置宽为200px,高为100px,背景颜色为灰色。
实现代码如下：
html结构代码如下：

css样式如下:

实现效果如图:

2、使文本垂直居中，使行高与容器高度一致，即可达到垂直居中的效果。
给css样式里添加line-height:100px;
效果图如下：

二、使子元素在父元素内部左右上下居中的方法。（PC端）
1、如果子元素元素类型为inline-block,给父元素添加text-align:center;使子元素水平居中。
a、vertical-align属性为垂直垂直对齐属性，且子元素必须为inline-block。
b、vertical-align采用对齐顶线、中线、基线、底线的方式,所以必须给子元素添 加一个"标尺"来确定中线，标尺类型也必须为inline-block，保证标尺和子元素在同一行。
c、因为做上下居中，中线对齐，标尺的高必须和父元素的高保持一致，且为了父元素里不出现多余的元素，宽度设置为0。
代码实现如下:
css样式:

html结构代码如下:

2、使用定位的方法来使元素居中。
a、给父元素添加属性position:relative;来作为参照物。
b、给子元素添加属性position:absolute；来定位子元素。
代码如下:
html结构:

css样式:
此方法需要知道子元素的宽高

此定位方法无需知道子元素的宽高即可使元素居中

效果图均为如下:

3、使用弹性盒子使元素居中（推荐移动端使用）
给父元素增加display : flex;使父元素转化为弹性盒子；
1）通过父元素属性来控制子元素位置

父元素添加属性设置主轴(默认为x轴)对齐方式：justify-content:center;
侧轴（默认为Y轴）对齐方式:align-items:center;
即可使子元素居中

2）通过子元素属性来控制子元素位置
子元素添加属性：margin:auto;即可居中。