容器，文字的水平和垂直居中的方法

最新推荐文章于 2022-04-08 16:16:03 发布

Spotlight_mar

最新推荐文章于 2022-04-08 16:16:03 发布

阅读量935

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/Spotlight_mar/article/details/61194222

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <style type="text/css">
        #container{
            width: 500px;
            height: 500px;
            background-color: blue;
            margin: 0 auto;         /*容器本身水平居中，不继承*/
            text-align: center;     /*容器内文字水平居中，可继承*/
            position: relative;
        }
        #wrapper{
            width: 300px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            top: 50%;
            margin-top: -100px;
            /*设置为容器的负1/2高度，不能用百分比，因为那样是相对父容器的。*/
            /*动态容器高度则用js获取后修改*/
        }
        #word{
            width: 200px;
            height: 100px;
            line-height: 100px;     /*单行文本行高等于容器高*/
            background-color: green;
            color: pink;
            margin: 0 auto;         /*只能水平居中*/
        }
        #test2{
            width: 300px;
            height: 300px;
            background-color: orange;
            text-align: center;
            display: table-cell;    /*配合vertical-align,ie7及以下不兼容*/
            vertical-align: middle;
        }
        #more-lines{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="wrapper">
            <p id="word">Only one line.</p>
        </div>
    </div>
    <div id="test2">
        <p id="more-lines">
            Much more lines.Much more lines.Much more lines.Much more lines.Much more lines.Much more lines.Much more lines.Much more lines.
        </p>
    </div>
</body>
</html>

效果如下

这里写图片描述

Spotlight_mar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
容器，文字的水平和垂直居中的方法

代码如下<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>test</title> <style type="text/css"> #container{ width: 500px; height: 500px; bac
复制链接

扫一扫