CSS实现水平居中与垂直居中
一、水平居中1. 必备知识1.1 text-align 属性1.2 display 属性1.3 margin 属性1.4 position 属性1.5 transform 属性 2. 实现方式2.1 内联元素居中2.2 块级元素居中2.2.1 `margin: 0 auto`2.2.2 `text-align + display`2.2.3 `position + transform` 二、垂直居中1. 偏移实现居中2. flex弹性布局实现居中一、水平居中
1. 必备知识
1.1 text-align 属性
text-align
属性指定元素文本的水平对齐方式(作用于子元素和文本)。其常用的值一般有三种:
left
左对齐right
右对齐center
居中对齐
1.2 display 属性
display
属性规定元素应该生成的框的类型(作用与元素自身)。其常用的值一般有四种:
none
不会被显示block
显示为块级元素inline
默认,显示为内联元素inline-block
显示为行内块级元素
1.3 margin 属性
margin
(外边距)属性定义元素周围的空间(作用于元素自身)。它一共有四个属性值,可以简写。
设置一个值:上右下左设置两个值:上下 - 左右设置三个值:上 - 左右 - 下设置四个值:上 - 右 - 下 - 左
1.4 position 属性
position
属性指定一个元素的定位方法的类型(作用于元素自身)。其常用的值一般有四种:
absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。relative
生成相对定位的元素,相对于其正常位置进行定位。fixed
生成固定定位的元素,相对于浏览器窗口进行定位。sticky
粘性定位,该定位基于用户滚动的位置。
1.5 transform 属性
transform
属性应用于元素的2D或3D转换(作用于元素自身)。这个属性允许你将元素旋转,缩放,移动,倾斜等。这个属性比较复杂,在这里我们用到的主要是移动。
2. 实现方式
既然是要实现水平居中,那么父元素必然是一个块级元素,此时根据要实现水平居中的子元素的display
状态可分为两种情况。
2.1 内联元素居中
内联元素的水平居中非常简单,只需要在父元素中设置text-align: center
即可。
2.2 块级元素居中
2.2.1margin: 0 auto
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>测试</title><style type="text/css">#parent {width: 400px;height: 400px;background: rgb(51, 236, 196);}#child {width: 100px;height: 100px;margin: 0 auto;background: coral;}</style></head><body><div id="parent"><div id="child"></div></div></body></html>
效果图:
这种居中方式的优缺点:
优点:只需对子级标签进行设置就可以实现居中效果。缺点:如果子级标签脱离文档流,将会导致margin属性值失效。
导致元素脱离文档流的几个属性:
float
浮动属性会导致脱离文档流position: absolute
绝对定位position: fixed
固定定位
2.2.2text-align + display
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>测试</title><style type="text/css">#parent {width: 400px;height: 400px;background: rgb(51, 236, 196);text-align: center;}#child {width: 100px;height: 100px;background: coral;display: inline-block;}</style></head><body><div id="parent"><div id="child"><div >居中文本</div></div></div></body></html>
效果图:
这种方式是通过设置子元素左右外边距自动填充,平分剩下的空间来实现水平居中,它的优缺点如下:
优点:浏览器兼容性比较好,因为text-align
和inline-block
这两个属性是CSS2
支持的,所以在老版本的浏览器中同样可以运行。缺点:text-align
属性具有继承性,使用它将会导致子标签的文本也是居中的,如果要解决这个问题就需要在其子标签中重新设置text-align
属性,但是设置后,该标签的子标签同样会继承上一级的text-align
,因此使用这种居中方式很有可能会每个子级标签重新设置text-align属性。
2.2.3position + transform
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>测试</title><style type="text/css">#parent {width: 400px;height: 400px;background: rgb(51, 236, 196);position: relative;}#child {width: 100px;height: 100px;background: coral;position: absolute;left: 50%;transform: translateX(-50%);}</style></head><body><div id="parent"><div id="child"></div></div></body></html>
效果图:
在这里需要注意一点,absolute
定位是相对于static
定位以外的第一个父元素进行定位,因此,我们在使用absolute
定位时一定要给父元素定位。(此处也可以子元素使用relative定位,父元素不给定位,效果是一样的)
此方法是先将给子元素绝对定位,随后通过left: 50%
让子元素向右偏移父元素一半宽度的距离,最后通过transform: translateX(-50%)
让子元素向左偏移自身一半宽度的距离,借此实现水平居中。
二、垂直居中
1. 偏移实现居中
采用上面所描述的水平居中第三种方式(position + transform
)即可实现元素的垂直居中。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>测试</title><style type="text/css">#parent {width: 400px;height: 400px;background: rgb(51, 236, 196);}#child {width: 100px;height: 100px;background: coral;margin: 0 auto;position: relative;top: 50%;transform: translateY(-50%);}</style></head><body><div id="parent"><div id="child"></div></div></body></html>
效果图:
此处代码实例中,水平居中是用margin: 0 auto
实现的,但要注意的是只有定位是relative
时才可使用margin
属性,若定位为absolute
则该属性失效,只能使用transform
属性实现元素的水平居中,此时子元素样式应为(注意此时父元素需要添加position: relative
属性):
#child {width: 100px;height: 100px;background: coral;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
2. flex弹性布局实现居中
使用CSS3
的弹性布局实现元素的垂直和水平居中会更加方便。只要给父元素设置display: flex
,然后设置对齐方式为两个居中对齐就行。关于flex弹性布局可以看看 阮一峰老师的博客,里面有详细的讲解。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>测试</title><style type="text/css">#parent {width: 400px;height: 400px;background: rgb(51, 236, 196);display: flex;justify-content: center;align-items: center;}#child {width: 100px;height: 100px;background: coral;}</style></head><body><div id="parent"><div id="child"></div></div></body></html>