css居中的几种方式

html-css015

css居中的几种方式,第1张

1.横向居中

（1）方法一

position: fixed

/* 居中对齐begin */

left: 50%

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

-webkit-transform: translateX(-50%)

transform: translateX(-50%)

（2）方法二

设置固定宽度，并且设置margin：auto

（3）方法三

position: fixed

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

2.纵向居中

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

height: 100px

line-height:100px

3.横向和纵向都居中

display: flex

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

justify-content: center

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

align-items: center

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：span {position: absolutetop: 45pxleft: 180px}。

3、浏览器运行index.html页面，此时成功通过css设置了文字在图片上面居中显示。