css文本和div垂直居中方法汇总.pdfVIP

css⽂本和div垂直居中⽅法汇总 在样式布局中，我们经常碰到需要将元素居中。通过css实现元素的⽔平居中较为简单：对⽂本，只需要对其⽗级元素设置 text-align: center; ，⽽对div等块级元素，只需要设置其left和right的margin值为auto。要实现元素的垂直居中，有⼈会想到css中的vertical-align属 性，但是它只对拥有valign特性的元素才⽣效，例如表格元素中的td 、th 、caption 等，⽽像div 、span 这样的元素是没有 valign特性的，因此使⽤vertical-align对它们不起作⽤。因此我们需要通过别的⽅法去实现元素的垂直居中，下⾯我总结了⼏种了常⽤垂直 居中⽅法。 单⾏⽂本垂直居中 对于单⾏⽂本，我们只需要将⽂本⾏⾼(line-height)和所在区域⾼度(height)设为⼀致即可： 1 !--html代码-- 2 div id=div1 3 这是单⾏⽂本垂直居中 4 /div 5 6 /*css代码*/ 7 #div1{ 8 width: 300px; 9 height: 100px; 10 margin: 50px auto; 11 border: 1px solid red; 12 line-height: 100px; /*设置line-height与⽗级元素的height相等*/ 13 text-align: center; /*设置⽂本⽔平居中*/ 14 overflow: hidden; /*防⽌内容超出容器或者产⽣⾃动换⾏*/ 15 } 多⾏⽂本垂直居中 多⾏⽂本垂直居中分为两种情况，⼀个是⽗级元素⾼度不固定，随着内容变化；另⼀个是⽗级元素⾼度固定。 ⽗级元素⾼度不固定 ⽗级⾼度不固定的时，⾼度只能通过内部⽂本来撑开。这样，我们可以通过设置内填充（padding）的值来使⽂本看起来垂直居中，只需设 置padding-top和padding-bottom的值相等： 1 !--html代码-- 2 div id=div1 3 这是多⾏⽂本垂直居中， 4 这是多⾏⽂本垂直居中， 5 这是多⾏⽂本垂直居中， 6 这是多⾏⽂本垂直居中。 7 /div 8 9 /*css代码*/ 10 #div1{ 11 width: 300px; 12 margin: 50px auto; 13 border: 1px solid red; 14 text-align: center; /*设置⽂本⽔平居中*/ 15 padding: 50px 20px; 16 } ⽗级元素⾼度固定 本⽂⼀开始就提到css中的vertical-align属性，但是它只对拥有valign特性的元素才⽣效，结合display: table; ，可以使得div模拟table属 性。因此我们可以设置⽗级div的display属性：display: table; ；然后再添加⼀个div包含⽂本内容，设置其display:table-cell; 和vertical- align:middle; 。具体代码如下： 1 !--html代码--