作者:順俟自嘫 | 来源:互联网 | 2020-08-10 09:45
本篇文章给大家带来的内容是关于div标签:水平居中和垂直居中的实现,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
在前端开发时,经常会遇到需要居中的情形,居中分2种情况,一个是水平居中,一个是垂直居中,总结一下用到的方法。
水平居中实现
margin:0 auto
auto表示外边距左右距离相同即可实现水平居中的效果
垂直居中实现
1、最常用到的一种方式是根据偏移量来实现
想要实现方块内部中心点垂直居中,还要加上偏移量,margin-top的值为红色框heigh/2,margin-left的值为红色框width/2。
2、让p块里的多行文字垂直居中,可以用table和table-cell来实现
垂直居中是布局中十分常见的效果之一垂直居中是布局中十分常见的效果之一垂直居中是布局中十分
常见的效果之一垂直居中是布局中十分常见的效果之一
display: table使块状元素成为一个块级表格,display: table-cell;子元素设置成表格单元格,vertical-align: middle;使表格内容居中显示,即可实现垂直居中的效果
以上就是div标签:水平居中和垂直居中的实现(附代码)的详细内容,更多请关注 第一PHP社区 其它相关文章!