css之水平垂直居中篇

来源：互联网发布：nginx 二级域名转发编辑：程序博客网时间：2024/06/05 21:02

css垂直居中的方法有很多，今天没事干，就整理了一下

一、块级元素的垂直水平居中

1.固定宽高+position:absolute+margin：auto实现垂直水平居中（灰色区域为浏览器页面，红色为当前元素）

1）来看一个小栗子（只设置margin属性）：我们发现只设置margin属性的时候实现水平居中

<head><meta charset="UTF-8"><title>Document</title><style>div{background-color: red;width: 100px;height: 100px;margin: auto;/*设置margin属性*/}</style></head>

<body><div>1</div></body>

这是效果图：

2）当我们给css加下面这行代码时：我们发现原来水平居中的元素又回到了原点

position: absolute;

效果图如下：

3）当我们给css样式加上下面的代码时发现元素实现了垂直加水平居中

top:0;left:0;right:0;bottom:0;

效果图如下：

是不是很神奇，其实主要是因为当给元素绝对定位的时候，元素脱离当前的文档流，独占一整个页面，当设置了top等值时，相当于给当前页面设置边框

2.在父元素里面的子元素实现居中，并且让父元素也实现居中

来看下面的例子：

<head><meta charset="UTF-8"><title>Document</title><style>body{background-color: grey;}div{background-color: black;width:500px;height: 300px;margin: auto;/*这款设置当前元素居中，并且绝对定位和top等值都让当前元素居中*/display: flex;/*设置弹性盒模型，并且设置子元素的对齐方式为居中*/justify-content: center;position: absolute;left: 0;top: 0;bottom: 0;right: 0;}p{background-color: red;margin: auto;/*加上这句代码以后就成功的垂直水平居中了*/width: 100px;height: 100px;}</style></head><body><div><p>1</p></div></body>

注意：块级元素的垂直居中也可以给父元素设置display:table-cell和vertical-algin：middle

二、行级元素的垂直水平居中

1.单行文本元素的时候，使用text-algin:center;和line-height进行垂直水平居中

<head><meta charset="UTF-8"><title>Document</title><style>div{background-color: grey;height:50px; width: 200px;text-align: center;/*让在这个元素里面的内容水平居中显示*/}span{background-color: pink;line-height: 50px;/*让文本元素的行高等于父元素的高，进行垂直居中*/}</style></head><body><div><span>我能不能居中啊</span></div></body>

效果图：

2.多行文本居中（垂直居中：dispaly:table-cell;+vertical:middle；水平居中：margin:auto）：

看下面的小栗子

<head><meta charset="UTF-8"><title>Document</title><style>div{background-color: grey;height:300px; width: 300px;text-align: center;/* 使元素里面的内容水平居中 */display: table-cell;/* 以下两句代码是元素按照table表格显示，并垂直居中 */vertical-align: middle;}span{background-color: pink;;}</style></head><body><div><span>我能不能居中啊</span><br><span>我能不能居中啊</span><br><span>我能不能居中啊</span><br><span>我能不能居中啊</span><br></div></body>

阅读全文

0 0