Login
网站首页 > 文章中心 > 其它

css居中_css垂直居中怎么设置

作者:小编 更新时间:2023-07-23 13:37:40 浏览量:215人看过

看你是垂直同步什么了

line-height:盒子的高度

css中有一个属性:line-height

如果你的文本p,span,div,title等

那么line-height的值到底等于多少居中呢;

line-height的值=元素值咐察得1/2;

也就是说如果元素高度=100px;那么line-height的值必须=100px才能居中耐氏,昌简散如果是=200px,那么就是在最底下

css中有咐察一个属性:line-height

如果文本p,span,div,title等

line-height的值=元素值得1/2;

也就是昌简散说如果元素高度=100px;那耐氏么line-height的值必须=100px才能居中,如果是=200px,那么就是在最底下

1.横向居中

(1)方法一

position: fixed;

/* 居中对齐begin */

left: 50%;

/* 铅顷兼容老版本的方法 */

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

(2)方法二

设置槐拿陆固定宽度,并且设置margin:auto

(3)方法三

left: 50% - 居中盒子宽度的50%;

2.纵向居中

(1) 高度和行高设置一样

height: 100px;

line-height:100px;

3.横向和纵向都居中

/* 默认的主轴是x轴row, justify-content: center 沿着主轴居中对齐 */

justify-content: 敏饥center;

/* 我们需要一个侧轴居中 */

align-items: center;

CSS居中代码是:

◆◆◆margin: 0 auto;◆◆◆

拓展:HTML标签换行可渗团以使用

标签,如:

◆◆◆这是一裂汪段文本。

这是换行后的文本肆喊仔。◆◆◆

以上就是土嘎嘎小编大虾米为大家整理的css居中_css垂直居中怎么设置相关主题介绍,如果您觉得小编更新的文章对您有所帮助,不要忘记讲本站分享给您身边的朋友哦!!

版权声明:倡导尊重与保护知识产权。未经许可,任何人不得复制、转载、或以其他方式使用本站《原创》内容,违者将追究其法律责任。本站文章内容,部分图片来源于网络,如有侵权,请联系我们修改或者删除处理。

编辑推荐

热门文章