如何让div内的多行文本上下左右居中

时间 2019-12-13

标签如何 div 行文本上左右居中栏目 CSS 繁體版

原文原文链接

　　一、首先，若是div中的文本特别少，不超过div宽度，那么这种就很是简单了，直接line-height等于height就能够了css

　　　　<style type="text/css">
            #one{
                width: 200px;
                height: 200px;
                line-height: 200px;
                background: #FF9999;
                text-align: center;
            }
        </style>
        <div id="one">
                我是内容
        </div>

二、可是，在文本好多状况下，那么就会出现这种状况性能

GG了，若是div不是固定高度，使用padding是能够完美实现spa

    <style type="text/css">
            #one{
                width: 200px;
                padding: 100px 0;
                background: #FF9999;
                text-align: center;
                
            }
        </style>
    </head>
    <body>
            <div id="one">
                我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
            </div>
    </body>

三、2的前提是div不是定高的，可是在不少状况下，咱们须要的div是须要定高的，3d

CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起做用，可是在CSS中还有一个displaycode

属性可以模拟<table>，因此咱们能够使用这个属性来让<div>模拟<table>就能够使用vertical-align了。注意，display:table和blog

display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，所以咱们要为须要定位的文本再增长一个<div>元素：table