div垂直居中的方法_【CSS】8种常见的垂直水平居中方法

1.比较传统的方式 absolute+margin负值偏移

特点：父容器要设置宽高，需要知道子容器宽高，偏移量是子容器宽高的一半且是负值，兼容性好

  /* absolute+margin负值偏移布局 */.layout.absolute {position: relative;}.layout.absolute  article {position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -160px;}<section class="layout absolute"><article><p>1.absolute+margin负值偏移<br>（父容器要设置宽高，需要知道子容器宽高）</p></article></section>

2.absolute+transform布局

特点：父容器要设置宽高

  /* absolute+transform布局 */.layout.transform {position: relative;}.layout.transform article {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}<section class="layout transform"><article><p>2.absolute+transform<br>（父容器要设置宽高）</p></article></section>

3.flex布局

特点：自适应

  /* flex布局 */.layout.flex {display: flex;justify-content: center;align-items: center;}<section class="layout flex"><article><p>3.flex<br>（自适应）</p></article></section>

4.table-cell布局

特点：比其他方法多1个容器，注意边距重叠

  .layout.table-cell {display: table;width: 100%;}.layout.table-cell .outer {display: table-cell;vertical-align: middle;text-align: center;}.layout.table-cell article {margin: 0 auto;overflow: auto;}<section class="layout table-cell"><div class="outer"><article><p>4.table-cell<br>（多1个容器，注意边距重叠）</p></article>                      </div></section>

5.grid布局

特点：自适应,要考虑兼容性

   .layout.grid{display: grid;}.layout.grid article {justify-self: center;align-self: center;}<section class="layout grid"><article><p>5.grid<br>（自适应,要考虑兼容性）</p></article></section>

6.inline-block布局

特点：自适应，兼容性好

   .layout.inline-block {text-align: center;}.layout.inline-block::after {content: '';height: 100%;display: inline-block;vertical-align: middle;}.layout.inline-block article {display: inline-block;vertical-align: middle;}<section class="layout inline-block"><article><p>6.inline-block<br>（自适应）</p></article></section>

7.absolute + margin-auto 布局

特点：内外容器都要设置宽高，兼容性好

  .layout.margin-auto {position: relative;}.layout.margin-auto article{position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}<section class="layout margin-auto"><article><p>7.absolute + margin-auto<br>(内外容器都要设置宽高) </p></article></section>

8.line-height 布局

特点：只适合单行inline，而且要知道父容器的高度，兼容性好

.layout.line-height {line-height: 150px;}.layout.line-height article {display: inline;margin:  auto;}<section class="layout line-height"><article><p>8.line-height(只适合单行inline，而且要知道父容器的高度)</p></article></section>

完整例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>垂直居中</title><style>html,body {padding: 0;margin: 0;}.layout {margin-bottom: 15px;height: 150px;background-color: blueviolet;background-clip: content-box;}.layout article {background-color: lightcoral;color: #fff;width: 320px;height: 100px;  text-align: center;}/* absolute+margin负值偏移布局 */.layout.absolute {position: relative;}.layout.absolute  article {position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -160px;}/* absolute+transform布局 */.layout.transform {position: relative;}.layout.transform article {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}/* flex布局 */.layout.flex {display: flex;justify-content: center;align-items: center;}/* table-cell布局 */.layout.table-cell {display: table;width: 100%;}.layout.table-cell .outer {display: table-cell;vertical-align: middle;text-align: center;}.layout.table-cell article {margin: 0 auto;overflow: auto;}/* grid布局 */.layout.grid{display: grid;}.layout.grid article {justify-self: center;align-self: center;}/* inline-block布局 */.layout.inline-block {text-align: center;}.layout.inline-block::after {content: '';height: 100%;display: inline-block;vertical-align: middle;}.layout.inline-block article {display: inline-block;vertical-align: middle;}/* absolute + margin-auto */.layout.margin-auto {position: relative;}.layout.margin-auto article{position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}/* line-height 布局 */.layout.line-height {line-height: 150px;}.layout.line-height article {display: inline;margin:  auto;}</style>
</head>
<body><section class="layout absolute"><article><p>1.absolute+margin负值偏移<br>（父容器要设置宽高，需要知道子容器宽高）</p></article></section><section class="layout transform"><article><p>2.absolute+transform<br>（父容器要设置宽高）</p></article></section><section class="layout flex"><article><p>3.flex<br>（自适应）</p></article></section><section class="layout table-cell"><div class="outer"><article><p>4.table-cell<br>（多1个容器，注意边距重叠）</p></article></div></section><section class="layout grid"><article><p>5.grid<br>（自适应,要考虑兼容性）</p></article></section><section class="layout inline-block"><article><p>6.inline-block<br>（自适应）</p></article></section><section class="layout margin-auto"><article><p>7.absolute + margin-auto<br>(内外容器都要设置宽高) </p></article></section><section class="layout line-height"><article><p>8.line-height(只适合单行inline，而且要知道父容器的高度)</p></article></section></body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/498978.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！