css 文字自动换行并垂直居中div效果

最新推荐文章于 2024-04-17 12:54:14 发布

firesnow

最新推荐文章于 2024-04-17 12:54:14 发布

阅读量1w

点赞数 5

分类专栏： html

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一个学习使用的笔记实例，用纯css 实现css 文字自动换行并垂直居中div效果,这样就像表格一样可以实现不管多少内容都可以居中显示了哦。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>demo</title>
        <style type="text/css">
            .box {
                position: relative;
                width: 500px;
                height: 300px;
                border: 1px solid #FFF;
                background-color: #999;
                display: table;
            }
            
            .wrap{
                display: table-cell;
                vertical-align: middle;	
                *position:absolute;
                *top: 50%;
                *left: 0;
            }
            
            .content {
                *position: relative;
                *top: -50%;
                *left: 0;
            }          
            
        </style>
    </head>
    <body>

        <div class="box">
            <div class="wrap">
                <p class="content">
                    我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行
                    固定宽度的文字自动换行并垂直剧中">固定宽度的文字自动换行并垂直剧中</a>
                </p>
            </div>
        </div>
        <div class="box">

            <div class="wrap">
                <p class="content">
                    是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行
                </p>
            </div>
        </div>
    </body>
</html></td>
	  </tr>
	</table>

在线演示

firesnow

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css 文字自动换行并垂直居中div效果

一个学习使用的笔记实例，用纯css 实现css 文字自动换行并垂直居中div效果,这样就像表格一样可以实现不管多少内容都可以居中显示了哦。 demo .box { position: relative; width: 50
复制链接

扫一扫