居中元素总结

系统管理员 2021-03-28 15:07 575阅读 0赞

对于居中一个元素有很多种方法，同时也分很多种情况；比如水平居中一个块级元素、垂直居中一个浮动元素或者是一个绝对定位元素等等；下面就分情况进行总结：

**（一）水平居中**

1、水平居中一个块级元素

为块级元素添加“margin:0 auto;”

2、水平居中一个行级元素

在父级元素中添加“text-align:center;”

3、水平居中一个浮动元素

3.1 宽度不固定的浮动元素

![1182862-20170814164823818-356162489.png][]

样式为：

![1182862-20170814165019256-1413135955.png][]

3.2 宽度固定的浮动元素

html代码跟上面的一样，然后css样式为：

![1182862-20170814165739084-1003810262.png][]

效果图如下：这是垂直水平居中

![1182862-20170814165828350-126173329.png][]

但是如果将position的值设置为“relative”；结果会变成：这是水平居中，但有一半的高度超出了屏幕的上方

![1182862-20170814170208865-1194558745.png][]

3.3  水平居中一个绝对定位的元素

![1182862-20170814170900303-1614924153.png][]

水平居中总结：水平居中的属性主要有以下三种

（1）text-align：center；

（2）margin：0 auto；

（3）position:relative(absolute);left:50%;

**（二）垂直居中**

1、垂直居中一个行级元素：设置height和line-height的值一样

![1182862-20170814171640021-1688440722.png][]

2、垂直居中一个块级元素

2.1  父级元素高度固定

![1182862-20170815150455256-1157719405.png][]

样式为：

![1182862-20170815150728725-563663883.png][]

2.2 父级元素高度不固定

html代码和上面的是一样的，css样式如下：

![1182862-20170815151345818-325592048.png][]

[1182862-20170814164823818-356162489.png]: /images/20210328/1616944045538.png
[1182862-20170814165019256-1413135955.png]: /images/20210328/1616944025896.png
[1182862-20170814165739084-1003810262.png]: /images/20210328/1616944001462.png
[1182862-20170814165828350-126173329.png]: /images/20210328/1616943982321.png
[1182862-20170814170208865-1194558745.png]: /images/20210328/1616943961712.png
[1182862-20170814170900303-1614924153.png]: /images/20210328/1616943941287.png
[1182862-20170814171640021-1688440722.png]: /images/20210328/1616943918631.png
[1182862-20170815150455256-1157719405.png]: /images/20210328/1616943897894.png
[1182862-20170815150728725-563663883.png]: /images/20210328/1616943876543.png
[1182862-20170815151345818-325592048.png]: /images/20210328/1616943855206.png