csslabel居中布局_CSS垂直居中，你会多少种写法？
CSS控制居中是前端开发中⾮常常⽤的布局技能，本⽂列出⼏种CSS控制元素居中的⼏种⽅法。
谈及HTML元素居中展⽰，涉及到⽔平居中和垂直居中，以及⽔平垂直居中。由于HTML⽂档流是⽔平⽅向的，所以⽔平⽅向上的布局控制⽐垂直⽅向要简单很多，居中也是如此。不过(⽔平)垂直居中还是有很多种写法，⾄少⼀只⼿是数不过来了，本⽂列出⼏种，并进⾏简单⽐较。
⼀、⽔平居中
使⽤CSS控制⽔平居中很简单：
块级元素 设置width，并设置margin auto
内联元素 ⽗元素设置text-align center
HTML代码如下:
⽔平居中哦
1. 块级元素⽔平居中
.container { height: 300px; width: 300px; border: 1px solid red;}.content { width: 10rem; border: 1px solid green; margin: 0 auto;}
效果：
2. 内联元素⽔平居中
.container { height: 300px; width: 300px; border: 1px solid red; text-align: center;}.content { display: inline-block; border: 1px solid green;}
效果：
代码很简单，⽽且没什么兼容性问题，所以通常也不需要⽤别的复杂⽅式来实现⽔平居中效果。
⼆、⽔平垂直居中
使⽤CSS控制垂直居中(或者⽔平垂直居中)就不像控制垂直居中那么⽅便，这⾥主要罗列⼏种。
1. flex布局
flex布局出现以后，垂直居中就很⽅便了，直接设置⽗元素：
display flexalign-items center
如果同时要⽔平居中，则同时设置：
justify-content center
需要注意的是IE10+才⽀持，webkit前缀浏览器设置flex属性需要加webkit。
.container { width: 300px; height: 300px; border: 1px solid red; display: -webkit-flex; display: flex; // 关键属性 align-items: center;　// 垂直居中 justify-content: cente
2. margin+ position:absolute布局
position: absolute布局的元素，通过设置top/bottom, left/right这两对属性，可以让元素在垂直⽅向和⽔平⽅向分别具有了⾃适应的特
性。就像div在⽔平⽅向的默认表现⼀样!
上⽂中对于块级元素的⽔平居中，我们设置宽度然后配合以margin可以实现⽔平居中。⽽对于设置了top/bottom,left/right的absolute定
位元素，我们设置宽⾼再配合margin就可以达到⽔平垂直居中：
.container { width: 300px; height: 300px; position: relative; border: 1px solid red;}.content { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 200p
效果：
兼容性很好，IE8以上⽀持。
3. transform + absolute
absolute定位元素的left、top属性是⼦元素的左边界、上边界相对⽗元素进⾏定位；transform是CSS3中⾮常强⼤的⼀个属性，可以接收多个属性值，包括旋转、缩放、平移等多种功能。这⾥使⽤⼆者配合，先将⼦元素左上定点定位到⽗元素中⼼点，再使⽤transform将⼦元
素中⼼点移动到⽗元素的中⼼点即可：
.container { width: 300px; height: 300px; position: relative; border: 1px solid red;}.content { position: absolute; left: 50%; top: 50%; transform: translate(-50%效果：
这个⽅法有个⼩缺陷，就是translate函数的参数，最后的计算值不能为⼩数，否则有的浏览器渲染出来效果会模糊，所以使⽤本⽅法的话
css设置文字垂直居中
最好设置⼀下宽⾼为偶数。
4. absolute+margin负值
与上⼀种⽅法很类似，上⼀种⽅法是使⽤transform将元素向左上平移，本⽅法则是使⽤margin负值的⽅式将元素拉向左上⾓。
代码：
.container { width: 300px; height: 300px; position: relative; border: 1px solid red;}.content { position: absolute; left: 50%; top: 50%; width: 200px; height: 100效果：
5. absolute + calc
从上两种⽅法可以看到，absolute设置了left和top再通过平移或者margin将元素重新定位回去。如果我们直接可以计算出正确的left和top 值，岂不是⼀次到位？calc函数正有此功能，当然我们需要知道⼦元素的宽⾼：
.container { width: 300px; height: 300px; border: 1px solid red; text-align: center; position: relative;}.content { position: absolute; border: 1px solid green; w 效果：
6. line-height + vertical-align
vertical-align是⼀个作⽤于内联元素的属性。内联元素的特性是会和其它内联元素或者⽂字在同⼀⾏显⽰，但是默认情况下是与⽗元素“基线对齐”的。这⾥的的基线指的是⽗元素每⼀⾏中的⼀个垂直位置，是英⽂ｘ下边缘所在的⽔平, 通过设置vertical-align为middle可以将内联元素的中部对齐⽗元素的中部(基线+字母ｘ的⼀半⾼度)。所以可以利⽤这⼀点，将⽗元素的⾏⾼设置为其⾃⾝⾼度，然后将⼦元素与⽗
元素中线对齐，即可实现垂直居中。
代码：
.container { width: 300px; height: 300px; border: 1px solid red; line-height: 300px; text-align: center;}.content { display: inline-block; line-height: 1.5; border 效果：
以上⼏种⽅法各有不同的适⽤条件，因此也有不同的优缺点，下表对各种⽅法进⾏了⽐较：
⽅法条件兼容性flex布局⽆IE10+margin + absolute知道⼦元素宽⾼IE8+transform + absolute⽆，⼦元素宽⾼应为偶数
IE10+absolute + margin负值知道⼦元素宽⾼absolute + calc知道⼦元素宽⾼IE9+line-height + vertical-align知道⽗元素宽⾼
CSS中同⼀种表现效果往往有多种不同的实现⽅法，要刻意地尝试多种写法，避免熟悉了⼀两种⽅法就⽌步不前，这样才能对各种情况得⼼应⼿

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。