div标签:水平居中和垂直居中的实现(附代码)


本文摘自PHP中文网,作者不言,侵删。

本篇文章给大家带来的内容是关于div标签:水平居中和垂直居中的实现,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

在前端开发时,经常会遇到需要居中的情形,居中分2种情况,一个是水平居中,一个是垂直居中,总结一下用到的方法。

水平居中实现

1

margin:0 auto

auto表示外边距左右距离相同即可实现水平居中的效果

垂直居中实现

1、最常用到的一种方式是根据偏移量来实现

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<style>

    *{margin: 0;padding: 0;}

    .content{

        position: relative;

        width: 300px;

        height: 300px;

        background-color: #000;

        margin: 300px auto;

    }

    .beat{

        width: 100px;

        height: 100px;

        background-color: #ff0000;

        position: absolute;

        left:50%;

        top:50%;

        margin-top: -50px;

        margin-left: -50px;

    }

</style>

 

<div class="content">

    <div class="beat">

    </div>

</div>

4172825918-5b67b87482a94_articlex.jpg

红色方块位于黑色方块的中心位置,实现了垂直居中效果

left,top分别设置50%,红色方块的起始点位于垂直居中的位置,效果如下图:

2311003374-5b67bad013fca_articlex.jpg

想要实现方块内部中心点垂直居中,还要加上偏移量,margin-top的值为红色框heigh/2,margin-left的值为红色框width/2。

2、让p块里的多行文字垂直居中,可以用table和table-cell来实现

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<style>

    *{margin: 0;padding: 0;}

    .content{

        width: 300px;

        height: 300px;

        background-color: #000;

        margin: 300px auto;

        color: #fff;

        display: table;

        text-align: center;

    }

    .content p{

        display: table-cell;

        height: 100px;

        vertical-align: middle;

    }

</style>

 

<div class="content">

   <p>垂直居中是布局中十分常见的效果之一垂直居中是布局中十分常见的效果之一垂直居中是布局中十分

       常见的效果之一垂直居中是布局中十分常见的效果之一</p>

</div>

2046267695-5b67becda28f3_articlex.jpg

display: table使块状元素成为一个块级表格,display: table-cell;子元素设置成表格单元格,vertical-align: middle;使表格内容居中显示,即可实现垂直居中的效果

相关文章推荐:

innerHTML属性是什么?innerHTML属性的用法

什么是响应式布局?html响应式布局的实现

以上就是div标签:水平居中和垂直居中的实现(附代码)的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

添加背景音乐的Html标签是什么

Html的标签的应该怎样嵌套

Html代码什么意思?

css中width有啥属性?

css flex布局的优缺点是什么

css文本框颜色怎么设置

关于css中的id选择器与class选择器的介绍

react如何引入css

Html怎么改变标签的字体

怎样让前端界面自动清理js、css文件的缓存

更多相关阅读请进入《Html》频道 >>




JavaScript 从入门到项目实践
书籍

JavaScript 从入门到项目实践

清华大学出版社

本书采取“基础知识→核心应用→核心技术→高级应用→行业应用→项目实践”的结构和“由浅入深,由深到精”的学习模式进行讲解。全书共35章,不仅介绍了HTML、CSS、对象、函数、事件等JavaScript语言的基础知识,而且深入介绍了jQuery、客户端、服务器端、数据存储等核心技术。



打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...