江苏龙网

  1. 主页 > 生活百科 > >

css中4种方法使内容居中

css

Flexbox通常首选方法是使用flexbox居中内容 。只需三行代码即可：display:flex ， 然后使用 align-items:center 和 justify-content:center 将子元素垂直和水平居中 。
如下代码：
html：
<div class="flexbox-centering"><div>Centered content.</div></div>css：
.flexbox-centering {display: flex;justify-content: center;align-items: center;height: 100px;}Grid使用grid(网格)与flexbox非常相似 ， 也是一种常见的技术 ， 尤其是布局中已经使用网格的情况下 。与前一种flexbox技术的唯一区别是它显示为栅格 。
如下代码：
html:
<div class="grid-centering"><div class="child">Centered content.</div></div>css:
.grid-centering {display: grid;justify-content: center;align-items: center;height: 100px;}Transform使用css transform 居中元素 ， 前提是容器元素必须设置为position:relative ， 然后子元素使用 left:50%和top:50%偏移子元素 ， 最后使用 translate（-50% ， -50%）以抵消其偏移的位置 。
代码如下：
【css中4种方法使内容居中】html：
<div class="parent"><div class="child">Centered content</div></div>css：
.parent {border: 1px solid #9C27B0;height: 250px;position: relative;width: 250px;}.child {left: 50%;position: absolute;top: 50%;transform: translate(-50%, -50%);text-align: center;}Table最后 ， 表格居中是一种旧技术 ， 在使用旧浏览器时 ， 您可能会喜欢这种技术 。前提是容器元素设置为display:table ， 然后子元素设置为 display: table-cell ， 最后使用 text-align: center 水平居住和vertical-align: middle 垂直居中 。
代码如下：
html：
<div class="container"><div class="center"><span>Centered content</span></div></div>css:
.container {border: 1px solid #9C27B0;height: 250px;width: 250px;}.center {display: table;height: 100%;width: 100%;}.center > span {display: table-cell;text-align: center;vertical-align: middle;}



    推荐阅读


    上一篇：张雨绮的简介?张雨绮个人资料

    下一篇：Linux搭建开源企业邮箱系统EwoMail