文本在盒子里垂直居中 css

1. 已知父级宽高并且文本比较简短

 .outline0{width:200px;line-height:200px;text-align:center;background:#ccc;
}
<div class="outline0"><span>test</span>
</div>

2.转换元素的类型 vertical-align: middle;

.outline2{display:table;width:200px;height: 200px;background:#ccc;
}
.center{display:table-cell;text-align:center;vertical-align: middle;
}
<div class="outline2"><span class="center">test test test,test,test test test test test<span>
</div>

3.适合知道文本比较固定字段时，还有想定哪定哪

.outline3{width: 200px;height: 200px;background: #ccc;position: relative;
}
.text3{position: absolute;left: 50%;margin-left: -90px;display: block;width: 180px;top: 50%;margin-top: -21px;text-align: center;
}
<div class="outline3"><span class="text3">test test test,test,test test test test test<span>
</div>

4.最好用的

原因：使用top: 50%;left: 50%;，是以左上角为原点，故不处于中心位置
translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置

.outline4{width: 200px;height: 200px;background: #ccc;margin-bottom: 10px;text-align: center;position: relative;
}
.text4{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
}
<div class="outline4"><span class="text4">test test test,test,test test test test test<span>
</div>

5.flex

.body {display: flex;justify-content: center;align-items: center;height:500px;width:100%;
}
.box {width: 50px;height: 50px;background:#000;
}<div class="body "><div class="box"></div></div>

文本在盒子里垂直居中 css相关推荐

CSS自动生成排行榜或者序号（不论高度，文字都能垂直居中CSS样式）；
1. 在子集的伪类上加上content : counter(sectioncounter); counter-increment :sectioncounter; 在父级counter-reset:s ...
css图片在盒子里居中,让图片在div盒子中水平垂直居中
//调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...
CSS学习笔记（内边距~文字在盒子里的垂直居中）
内边距 1.内边距就是内容和边框之间的距离. 2.格式 2.1.非连写 .san1{width: 100px;height:100px;border: 1px solid black;padding- ...
html盒子嵌套居中,css在盒子中垂直居中和固定居中
顶部固定居中我是固定的 .w960{ width: 960px; margin:0 auto; } .fixed{ position: absolute; top:0; left: 0; right ...
CSS02_设置盒子水平+垂直居中设置文本水平+垂直居中
写在前面:此贴为CSS高频题,针对盒子模型的水平+垂直居中,还提到了其内部文字的居中,如有补充,请留下评论 HTML代码结构: <body><div class="box- ...
CSS 字体文本过渡盒子初步
12.17 学习笔记主要内容: 1.CSS字体样式 2.CSS文本样式 3.CSS使用过渡 4.盒子初步一.CSS字体 1 font-size :字体大小 2.font-family:样式(后加字 ...
文本和盒子的水平垂直居中 (18种方法)
目录一.水平居中: 1.(子元素居中)父:text-align:center:(行内元素) 2.(自己居中)自己:margin:0 auto:(块级元素) 3.(子元素居中)(子)display:i ...
css数字固定居中怎么使用,css在盒子中垂直居中和固定居中
顶部固定居中我是固定的 .w960{ width: 960px; margin:0 auto; } .fixed{ position: absolute; top:0; left: 0; right ...
css一个盒子里可以装3个图片并排吗_John: CSS浮动与清除浮动属性详解（CSS float clear）...
CSS里的浮动,可以让元素脱离标准流,从左上角或右上角依次贴边排列. 下面这个案例将会帮我们了解浮动的基本情况.下面这段代码块,外面是一个大div,里面包含着3个div,第一个左浮动,后两个无浮动. ...

文本在盒子里垂直居中 css

1. 已知父级宽高并且文本比较简短

2.转换元素的类型 vertical-align: middle;

3.适合知道文本比较固定字段时，还有想定哪定哪

4.最好用的

5.flex

文本在盒子里垂直居中 css相关推荐

最新文章

热门文章