CSS总结div中的内容垂直居中的四种方法
程序员文章站
2022-04-24 22:26:29
...
一、行高(line-height)法
如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如:
p { height:30px; line-height:30px; width:100px; overflow:hidden; }
二、内边距(padding)法
另一种方法和行高法很相似,它同样适合一行或几行文字垂直居中,原理就是利用padding将内容垂直居中,比如:
p { padding:20px 0; }
三、模拟表格法
将容器设置为display:table,然后将子元素也就是要垂直居中显示的元素设置为display:table-cell,然后加上vertical-align:middle来实现。
html结构如下:
<div id="wrapper">
<div id="cell">
<p>测试垂直居中效果测试垂直居中效果</p>
<p>测试垂直居中效果测试垂直居中效果</p>
</div>
</div>
css代码:
#wrapper {
display:table;width:300px;height:300px;background:#000;margin:0 auto;color:red;
}
#cell{
display:table-cell; vertical-align:middle;
}
四、CSS3的transform来实现
css代码如下:
.center-vertical{
position: relative;
top:50%;
transform:translateY(-50%);
}
.center-horizontal{
position: relative;
left:50%;
transform:translateX(-50%);
}
五:flex布局
html代码:
<div class="flex">
<div>
<p>我是多行文字我是多行文字我是多行文字我是多行文字</p>
<p>我是多行文字我是多行文字我是多行文字我是多行文字</p>
</div>
</div>
CSS代码:
.flex{
/*flex 布局*/
display: flex;
/*实现垂直居中*/
align-items: center;
/*实现水平居中*/
justify-content: center;
text-align: justify;
width:200px;
height:200px;
background: #000;
margin:0 auto;
color:#fff;
}
上一篇: socket的相关操作
下一篇: socket相关函数
推荐阅读
-
结合CSS3的新特性来总结垂直居中的实现方法
-
css3 flex实现div内容水平垂直居中的几种方法
-
css+div布局中的垂直居中
-
CSS中垂直居中的简单实现方法
-
CSS中垂直居中的方法
-
结合CSS3的新特性来总结垂直居中的实现方法
-
div垂直居中的N种方法以及多行文本垂直居中的方法_html/css_WEB-ITnose
-
初学HTML/CSS:图片如何在DIV中的垂直居中,文字与DIV中的间距如何消除_html/css_WEB-ITnose
-
初学HTML/CSS:图片如何在DIV中的垂直居中,文字与DIV中的间距如何消除_html/css_WEB-ITnose
-
HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结