css 元素居中
一:水平居中
1、行内元素水平居中
在父元素上设置 text-align: center 使文字/图片水平居中。
.container { text-align: center; }
2、块级元素水平居中
- 先给块级元素设置宽度(不设置宽度,块级元素自己占据一整行,何谈居中)
- 再给块级元素设置margin:0 auto;(当上下margin不一定是0,可以按照需求来设置)
.container { width: 200px; margin: 0 auto; }
二、垂直居中
1、块级元素内部垂直居中
原理:设置块级元素上下padding相等
前提:没有设置高度,高度由内容撑开。块级元素如果设置了高度,就不知道如何设置padding的数值
demo
<style> .ct{ padding: 40px 0; text-align: center; background: #eee; } </style> <div class="ct"> <p>好好学习</p> <p>天天向上</p> </div>
执行结果
2、绝对定位实现垂直居中
(1)demo,
使用前提是块级元素的宽高固定
<div class="dialog"> <div class="header">我是标题</div> <div class="content">我是内容</div> </div> <style> html,body { height: 100%; } .dialog { position: absolute; left: 50%; //使用绝对定位,让dialog起点偏移到页面的中央 top: 50%; margin-left: -200px;//通过负margin,偏移dialog宽高的一半,让dialog处于正中 margin-top: -150px; width: 400px; height: 300px; box-shadow: 0px 0px 3px #000; } .dialog .header{ padding: 10px; background: #000; color: #fff; } .dialog .content{ padding: 10px; } </style>
(2)解析:
使用绝对定位 position: absolute,让dialog起点偏移到页面的中央
通过负margin,偏移dialog宽高的一半,让dialog处于正中。不用relative的原因是已经用了绝对定位了,所以只好用负margin。结果如图
(3)块级元素的宽高不固定,就不能用负margin了(margin使用百分比是相对于父元素的宽度)。我们可以用css3的一个transform的属性,transform是相对自身的宽高来做偏移的。
3、vertical-align实现水平垂直居中
原理:
- 通过text-align:center 实现水平居中
- 通过伪元素设置一个内容为空的元素,设置高度为100%,通过vertical-align实现基线对齐。
使用环境:块级元素中设置行内元素水平垂直居中
代码:demo
结果:
遇坑:1、当然使用绝对定位也可以实现这个效果
2、伪元素设置display:block是有问题,需要设置为inline-block
3、使用伪元素是为了减少标签
4、table-cell实现居中
原理:把box设置为表格元素(display: table-cell),通过vertical-align: middle对里面的元素做垂直居中
缺点:把box设置为display: table-cell,box不再是块级元素,如果不设置宽度就会收缩。
代码:demo
结果:
5、display: flex实现
代码:demo
<div class="space"> <div class="earth"></div> </div> .space { width: 100vw; height: 100vh; /* 设置宽高以显示居中效果 */ display: flex; /* 弹性布局 */ align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ } body { margin: 0; background: rgba(0, 0, 0, .95); } .earth::after { content: '
相关推荐
gufudhn 2020-06-12
沈宫新 2020-05-04
STPace 2020-02-17
libowen0 2014-05-30
Phoebe的学习天地 2019-07-01
Phoebe的学习天地 2019-07-01
王为仁 2019-07-01
WebVincent 2019-07-01
王景迁 2019-07-01
libowen0 2019-06-30
冰蝶 2018-08-17
qiupu 2019-06-28
Dorissun 2016-09-22
hellowzm 2020-10-12
liusure0 2020-01-11
jiedinghui 2019-12-23