CSS元素居中的方式

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

css样式如下:

实现效果如图:

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

二、使子元素在父元素内部左右上下居中的方法。
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样式:
此方法需要知道子元素的宽高

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

效果图均为如下: